【发布时间】：2018-06-13 17:50:37
【问题描述】：
我如何缩小以适应横幅图像 IN SHOPIFY
我是 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
【问题讨论】：