Question

我在“ li”元素内的“ div”中有一个“ img”，并且所有内容都在“ section”中，该“ section”代表图像和图像的自动/手动滑块。我正在尝试制作响应式图像。在我的情况下，当我切换到电话概览并调整页面大小时，我的图像不跟随它而保持相同大小。

P.S：我无法更改滑块的代码。必须按照html代码中的说明进行操作。

这是我的html代码：

<section id="home"  onmouseover="Stop()" onmouseout="init()">
    <ul class="slides stretch">
        <input type="radio" name="radio-btn" id="img-1" checked />
        <li class="slide-container">
            <div class="slide">
                <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
            </div>
            <div class="nav">
                <label class="prev" onclick="PrevSlide(1)">&#x2039;</label>
                <label id="clicker-1" class="next" onclick="NextSlide(1)">&#x203a;</label>
            </div>
        </li>

        <input type="radio" name="radio-btn" id="img-2" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
            </div>
            <div class="nav">
                <label class="prev" onclick="PrevSlide(2)">&#x2039;</label>
                <label id="clicker-2" class="next" onclick="NextSlide(2)">&#x203a;</label>
            </div>
        </li>
    </ul>
</section>

对于CSS，这是我的代码：

/*<ul> elements*/
.slides {
    padding: 0;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

/*<li> element: Contains Image + Arrows*/
.slide-container { display: block; }

/*<div> element: Contains only Image*/
.slide {
    top: 0;
    opacity: 0;
    width: 1264px;
    height: 420px;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}

.slide  img {
width:100%;
    height: 100%;
}

.nav label {
    height: 100%;
    display: none;
    position: absolute;

opacity: 0;
    z-index: 1;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.9; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }


input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

我已经尝试过CSS代码，但是根本没有用：

.slide img{
    max-width:100%;
    height:auto;
}

有人可以建议我另一种解决方案吗？

Answer 1

您的问题是以下代码。

.slide {
    /* ... */
    width: 1264px;
    height: 420px;
}

在响应代码中，您不能具有这样的固定宽度。

为什么不起作用？图像的max-width: 100%确保永远不会比图像的父元素（在您的情况为.slide中）宽{{ 1}}。

我该如何解决？如果没有运行此代码的Javascript代码，我只能提出解决方案。

将1264px更改为width: 1264px;。
使用填充设置幻灯片放映的宽高比，并使图像填充父元素。

width: 100%

但是，我有一种感觉，如果幻灯片不是/*<div> element: Contains only Image*/ .slide { top: 0; opacity: 0; width: 100%; /* Code changed */ height: 0; /* Code changed */ padding-bottom: 33.2%; /* Code added */ display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out; } .slide img { position: absolute; top: 0; left: 0; width:100%; height: 100%; }，则幻灯片将无法播放。

为了获得进一步的帮助，我需要运行它的Javascript代码，最好是您的代码的有效演示。您可以通过向您的网站添加链接或通过JSfiddle，CodePen或StackOverflow片段重新创建代码来实现。

Answer 2

正如Chris Happy所解释的，您在.slide容器上设置了固定的宽度和高度，这将禁止图像适应视口大小。

为解决此问题，您将需要使用响应式布局以及对视口大小（例如％，vw，vh）做出响应的单位。

作为进一步的建议，请考虑使用flexbox。 Here is a complete guide to flexbox

Answer 3

我相信您正在寻找的是CSS响应式媒体查询。是否会根据用户浏览器屏幕的大小来调整页面CSS（在这种情况下为图像大小）？

我认为这应该可行。注意：max-width: 600px是将触发此CSS的最大浏览器宽度。

   @media only screen and (max-width: 600px) {
  .slide {
   CSS HERE
  }
}

进一步的阅读：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 4

Chris Happy是对的。但我想详细说明。我想将此添加到您的html中。将img标签放入另一个div中，如下所示：

<li class="slide-container">
    <div class="slide">
        <div class="slide-container-container">
            <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
    </div>
    <div class="nav">
        <label class="prev" onclick="PrevSlide(1)">&#x2039;</label>
        <label id="clicker-1" class="next" onclick="NextSlide(1)">&#x203a;</label>
    </div>
</li>

然后使用以下样式进行一些调整：

.slide {
    top: 0;
    opacity: 0;
    width: 1264px;
    height: 420px;
    display: block;
    position: relative;
    transform: scale(0);
    transition: all .7s ease-in-out;
    margin: 0 auto;    //added-line
}
.slide:before {
    content: "";
    display: block;
    padding-top: 63%;
}
.slide-container-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav label {
    height: 100%;
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 50vh;  //added-line
    height: 50vh;    //added-line
    top: 0;    //added-line
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

现在假设您的视图的宽度为1264，高度为420。没关系。但是，如果要使其响应，则需要破坏此属性并将其更改为vh，vw或％。因此，假设视口的宽度为425px。这是完美的，因为现在您可以将width: 1264px更改为width: 100%和height: 100vh。然后，还应该根据您最喜欢的内容更改导航标签line-height: 50vh和height: 50vh。

此外，技术响应性图像依赖于其纵横比。这就是为什么我将.slide-container-container用作图像，并将.slide:before用作图像的原因。我希望这会有所帮助。

li元素内div内的响应img？

4 个答案: