Question

如何缩小图片横幅 IN SHOPIFY

我是新来店铺，不知道它是如何运作的，如果您有任何建议，请告诉我。我附上了一些例子，所以你知道我在说什么。

<div class="slider-area" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  <div class="slider-active owl-carousel">
    {% for block in section.blocks %}   
    <div class="single-slider single-slider-book1 bg-img" style="background-image: url({% if block.settings.slider_bg_image %}
                                                                 {{ block.settings.slider_bg_image | img_url: 'master' }}
                                                                 {% else %}https://via.placeholder.com/1545x950{% endif %})">
      
      <div class="container">
        <div class="slider-animation slider-content-book fadeinup-animated {% if block.settings.slider_content_position_right %}content_right{% endif %}">
          {% if block.settings.slider_title_1 != '' %}
          <h1 class="animated" style="color: {{ block.settings.slider_title_1_color }}">{{ block.settings.slider_title_1 }}</h1>
          {% endif %}
          
          {% if block.settings.slider_title_2 != '' %}
          <h2 class="animated" style="color: {{ block.settings.slider_title_2_color }}">{{ block.settings.slider_title_2 }}</h2>
          {% endif %}
          
          {% if block.settings.slider_subtitle != '' %}
          <p class="animated" style="color: {{ block.settings.slider_subtitle_color }}">{{ block.settings.slider_subtitle }}</p>
          {% endif %}
          
          {% if block.settings.slider_btn_text != '' %}
          <a href="{{ block.settings.slider_btn_url }}" style="color: {{ block.settings.slider_btn_color }}; 
                                                               background-color: rgba({{ block.settings.slider_btn_bg_color }}, 1)">
            {{ block.settings.slider_btn_text }}</a>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>



{% for block in section.blocks %}  
<style>
  .slider-content-book h1 span {color: {{ block.settings.slider_title_1_span_color }};}
  .slider-animation.slider-content-book.content_right {text-align: right;}
  .slider-animation.slider-content-book.content_right p {margin-left: auto;}
  .slider-content-book > a:hover {box-shadow: 0 10px 35px -7px rgba({{ block.settings.slider_btn_bg_color }}, 0.9);}
</style>
{% endfor %}



<script>
  $('.slider-active').owlCarousel({
    loop: true,
    nav: false,
    autoplay: {% if section.settings.slider_autoplay_enable %}true{% else %}false{% endif %},
    autoplayTimeout: 5000,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    item: 1,
    rtl:true,
    responsive: {
      0: {
        items: 1
      },
      768: {
        items: 1
      },
      1000: {
        items: 1
      }
    }
  })
</script>





{% schema %}
  {
    "name": "Slider- Book",
    "settings": [
      {
        "type": "checkbox",
        "id": "slider_autoplay_enable",
        "label": "Enable Slider Autoplay",
        "default": true
      }
	],
    "blocks": [
		{
			"type": "slide",
			"name": "Slide",
			"settings": [
				{
					"type": "image_picker",
					"id": "slider_bg_image",
					"label": "Slider BG Image"
				},
				{
					"type": "header",
					"content": "Slider Content"
				},
                {
                  "type": "checkbox",
                  "id": "slider_content_position_right",
                  "label": "Slider Content Position Right",
                  "default": false
                },
				{
					"type": "text",
					"id": "slider_title_1",
					"label": "Title 1",
					"default": "<span>Knowledge</span> is",
					"info": "Use '<span>' tag for color text e.g. <span>Knowledge</span> is"
				},
				{
					"type": "text",
					"id": "slider_title_2",
					"label": "Title 2",
					"default": "Power."
				},
				{
					"type": "textarea",
					"id": "slider_subtitle",
					"label": "Sub-title",
					"default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
				},
				{
					"type": "text",
					"id": "slider_btn_text",
					"label": "Button Text",
					"default": "More Books"
				},
				{
					"type": "url",
					"id": "slider_btn_url",
					"label": "Button URL",
					"default": "\/collections\/all"
				},
                {
                  "type": "header",
                  "content": "Color [See More Color](https:\/\/www.w3schools.com/colors/colors_picker.asp)"
                },
                {
                  "type": "color",
                  "id": "slider_title_1_color",
                  "label": "Title 1 Color"
                },
                {
                  "type": "color",
                  "id": "slider_title_1_span_color",
                  "label": "Title 1 span text Color"
                },
                {
                  "type": "color",
                  "id": "slider_title_2_color",
                  "label": "Title 2 Color"
                },
                {
                  "type": "color",
                  "id": "slider_subtitle_color",
                  "label": "Sub-title Color"
                },
                {
                  "type": "color",
                  "id": "slider_btn_color",
                  "label": "Button text Color"
                },
                {
                  "type": "text",
                  "id": "slider_btn_bg_color",
                  "label": "Button BG Color",
                  "info": "Put RGB value e.g. 56, 40 , 25"
                }
			]			
		}
	],
	"presets":[
		{
			"name": "Slider- Book",
			"category": "slider",
			"blocks":[
				{
					"type": "slide"
				},
				{
					"type": "slide"
				}
			]
		}
	]
  }
{% endschema %}

具有相同图片的3个不同屏幕

你可以在这里看到预览 https://stashcbd-com.myshopify.com/?preview_theme_id=31932481611

Answer 1

图像尺寸（如果您指的是图像的原始尺寸）此时通过过滤器img_url: 'master'进行控制。但该语法已被弃用。您可以在此处阅读更多内容：https://help.shopify.com/themes/liquid/filters/deprecated-filters#named-size-parameters

因此，调整图像大小的正确方法是使用特定尺寸：

{{ block.settings.slider_bg_image | img_url: '2048x2048' }}

2048x2048的宽度和高度。

现在，如果你指的是通过CSS调整图像大小，这是一个完全不同的故事，你没有Shopify逻辑的问题，但CSS没有问题，问题没有被正确询问。

如何缩小以适应图像横幅在SHOPIFY

1 个答案: