Question

假设我在div中有图像，我指定div宽度为100％，但图像大小没有响应。

这是样本。只是看看并指导我需要为div添加什么样的CSS，因此div中的内容将根据屏幕大小进行响应。

<div class="headerCarouselwrapperOuter" style="width: 100%">
        <div class="headerCarouselwrapper">
            <img src="Images/new-bba-header-image1dyna.jpg" alt="" />
            <img src="images/new-bba-header-image2dyna.jpg"  alt="" />
            <img src="images/new-bba-header-image3dyna.jpg"  alt="" />
            <img src="images/new-bba-header-image4dyna.jpg"  alt="" />
        </div>
    </div>

Answer 1

默认div宽度为100％，以提供图像响应提及

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

在你的CSS中。

Answer 2

#headerCarouselwrapperOuter, .headerCarouselwrapper {width:100%;}
.headerCarouselwrapper img {display:block;width:100%;}

将此添加到您的CSS中，这会使您的图片响应

如何使div响应也适用于旧浏览器

2 个答案: