Shopify：幻灯片放映的图像不适合横幅区域；他们被裁剪
我正在使用带有Slick Slider Hero的shopify主题“ Pop”。在移动设备上打开幻灯片放映时，它会自动裁剪不需要的图像，因为我在图像中添加了文字，因此将其剪下（查看图片）
请让我知道要添加到哪个liquid / css文件中的代码，以便它调整图片的大小而不是将其剪掉。
非常感谢您！
主题代码
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.blocks.size > 0 %}
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-play">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
</span>
</button>
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed }}">
{% for block in section.blocks %}
{%- assign is_background_video = false -%}
{% if block.type == 'video' %}
{% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
{%- assign is_background_video = true -%}
{% endif %}
{% endif %}
<div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="slideshow__link">
{% endif %}
{% if block.type == 'video' %}
{% if block.settings.video_url != blank %}
<div class="video-loader"></div>
{% endif %}
{% unless block.settings.video_type == 'background' %}
<button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
</button>
{% endunless %}
{% if block.settings.video_url != blank %}
<div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
data-id="{{ block.settings.video_url.id }}"
data-type="{{ block.settings.video_type }}"
data-slideshow="Slideshow-{{ section.id }}"></div>
{% endif %}
{% endif %}
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{% else %}
<div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
</div>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
<div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
<div class="slideshow__text-content">
<div class="page-width">
{% unless block.settings.title == blank %}
<h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.title | escape }}
</h2>
{% endunless %}
{% unless block.settings.subheading == blank %}
<span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading | escape }}
</span>
{% endunless %}
{% if block.type == 'video' %}
{% unless block.settings.video_type == 'background' %}
<div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
<button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-play-video' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
</button>
</div>
{% endunless %}
{% endif %}
</div>
</div>
</div>
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div>
生成的HTML代码
<div id="shopify-section-1531416277337" class="shopify-section index-section index-section--flush" data-theme-editor-section-36470275618="{"id":"1531416277337","type":"slideshow","disabled":false}">
<div data-section-id="1531416277337" data-section-type="slideshow-section">
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="1531416277337" aria-live="polite">
<span class="slideshow__pause-stop">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-pause" viewBox="0 0 10 13"><g fill="#000" fill-rule="evenodd"><path d="M0 0h3v13H0zM7 0h3v13H7z"></path></g></svg>
<span class="icon__fallback-text">Pause slideshow</span>
</span>
<span class="slideshow__pause-play">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="0 0 18 32"><path d="M.263 0l17.071 15.944L.264 31.89" fill="#444" fill-rule="evenodd"></path></svg>
<span class="icon__fallback-text">Play slideshow</span>
</span>
</button>
<div class="slideshow slideshow--medium slick-initialized slick-slider slick-dotted" id="Slideshow-1531416277337" data-autoplay="true" data-speed="5000">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 750px;">
<div class="slideshow__slide slideshow__slide--1531416277337-0 slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" role="tabpanel" id="slickSlide10" aria-labelledby="slickDot10" tabindex="-1" data-theme-editor-block-36470275618="{"id":"1531416277337-0","type":"image"}" style="width: 375px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;">
<div class="slideshow__image box ratio-container js lazyloaded" data-bgset="//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_180x.jpg?v=1531416305 180w 114h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_360x.jpg?v=1531416305 360w 228h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_540x.jpg?v=1531416305 540w 342h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_720x.jpg?v=1531416305 720w 456h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_900x.jpg?v=1531416305 900w 571h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1080x.jpg?v=1531416305 1080w 685h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1296x.jpg?v=1531416305 1296w 822h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1512x.jpg?v=1531416305 1512w 958h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1728x.jpg?v=1531416305 1728w 1095h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305 1923w 1219h" data-parent-fit="cover" style="background-position: center bottom; background-image: url("https://cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305");">
<picture style="display: none;">
<source data-srcset="//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_180x.jpg?v=1531416305 180w 114h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_360x.jpg?v=1531416305 360w 228h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_540x.jpg?v=1531416305 540w 342h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_720x.jpg?v=1531416305 720w 456h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_900x.jpg?v=1531416305 900w 571h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1080x.jpg?v=1531416305 1080w 685h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1296x.jpg?v=1531416305 1296w 822h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1512x.jpg?v=1531416305 1512w 958h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1728x.jpg?v=1531416305 1728w 1095h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305 1923w 1219h" sizes="789.4736842105262px" srcset="//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_180x.jpg?v=1531416305 180w 114h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_360x.jpg?v=1531416305 360w 228h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_540x.jpg?v=1531416305 540w 342h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_720x.jpg?v=1531416305 720w 456h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_900x.jpg?v=1531416305 900w 571h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1080x.jpg?v=1531416305 1080w 685h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1296x.jpg?v=1531416305 1296w 822h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1512x.jpg?v=1531416305 1512w 958h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1728x.jpg?v=1531416305 1728w 1095h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305 1923w 1219h"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="789.4736842105262px"></picture>
</div>
<noscript>
<div class="slideshow__image" style="background-image: url('//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_2048x.jpg?v=1531416305'); background-position: bottom;">
</div>
</noscript>
<div class="slideshow__text-wrap">
<div class="slideshow__text-content">
<div class="page-width">
</div>
</div>
</div>
</div>
<div class="slideshow__slide slideshow__slide--1531416277337-1 slick-slide" data-slick-index="1" aria-hidden="true" role="tabpanel" id="slickSlide11" aria-labelledby="slickDot11" tabindex="-1" data-theme-editor-block-36470275618="{"id":"1531416277337-1","type":"image"}" style="width: 375px; position: relative; left: -375px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease;">
<div class="slideshow__image box ratio-container lazypreload js lazyloaded" data-bgset="//cdn.shopify.com/s/files/1/2543/3412/files/bottles_180x.jpg?v=1531419269 180w 120h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_360x.jpg?v=1531419269 360w 240h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_540x.jpg?v=1531419269 540w 360h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_720x.jpg?v=1531419269 720w 480h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_900x.jpg?v=1531419269 900w 600h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1080x.jpg?v=1531419269 1080w 720h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1296x.jpg?v=1531419269 1296w 864h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1512x.jpg?v=1531419269 1512w 1008h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1728x.jpg?v=1531419269 1728w 1152h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269 1920w 1280h" data-parent-fit="cover" style="background-position: center top; background-image: url("https://cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269");">
<picture style="display: none;">
<source data-srcset="//cdn.shopify.com/s/files/1/2543/3412/files/bottles_180x.jpg?v=1531419269 180w 120h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_360x.jpg?v=1531419269 360w 240h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_540x.jpg?v=1531419269 540w 360h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_720x.jpg?v=1531419269 720w 480h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_900x.jpg?v=1531419269 900w 600h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1080x.jpg?v=1531419269 1080w 720h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1296x.jpg?v=1531419269 1296w 864h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1512x.jpg?v=1531419269 1512w 1008h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1728x.jpg?v=1531419269 1728w 1152h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269 1920w 1280h" sizes="750px" srcset="//cdn.shopify.com/s/files/1/2543/3412/files/bottles_180x.jpg?v=1531419269 180w 120h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_360x.jpg?v=1531419269 360w 240h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_540x.jpg?v=1531419269 540w 360h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_720x.jpg?v=1531419269 720w 480h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_900x.jpg?v=1531419269 900w 600h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1080x.jpg?v=1531419269 1080w 720h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1296x.jpg?v=1531419269 1296w 864h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1512x.jpg?v=1531419269 1512w 1008h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1728x.jpg?v=1531419269 1728w 1152h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269 1920w 1280h"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="750px"></picture>
</div>
<noscript>
<div class="slideshow__image" style="background-image: url('//cdn.shopify.com/s/files/1/2543/3412/files/bottles_2048x.jpg?v=1531419269'); background-position: top;">
</div>
</noscript>
<div class="slideshow__text-wrap">
<div class="slideshow__text-content">
<div class="page-width">
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;" role="tablist">
<li class="slick-active" aria-hidden="false" role="tab" aria-selected="true" aria-controls="slickSlide10" id="slickDot10">
<button type="button" data-role="none" role="button" tabindex="0">Slide 1</button>
</li>
<li role="tab" aria-selected="false" aria-controls="slickSlide11" id="slickDot11" class="">
<button type="button" data-role="none" role="button" tabindex="0">Slide 2</button>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS代码
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
示例图片
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？