图像未缩放

Question

我想使homepage上有3张图像响应。他们没有扩大规模。我在html中删除了对高度或宽度大小的任何引用。我尝试使用CSS规则最大宽度，将图像定位为相对宽度值的百分比，但无法使其正常工作。

我的html看起来像这样：

<div class ="wrapper2">
    <div>
        <a href="https://www.whitehallpubliclibrary.org/kids-parent/kids/special-events-for-kids/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/kidsspecialevents.jpg" /></a></div>
<div>
        <a href="https://www.whitehallpubliclibrary.org/teens-parent/teens/special-events-for-teens/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/teenspecialevents.jpg" /></a></div>
    <div>
        <a href="https://www.whitehallpubliclibrary.org/adults-parent/adults/special-events-for-adults/"><img src="https://www.whitehallpubliclibrary.org/wp-content/uploads/2019/09/adultspecialevents.jpg" /></a></div>
    </div>

css（不起作用）看起来像这样：

.wrapper img {max-width:100%;}

任何帮助，我们将不胜感激。我已经使用它几个月了！谢谢

Answer 1

[就像罗布所说，.wrapper img {max-width:100%;}仅告诉浏览器您不希望图像变宽浏览器窗口宽度的100％。

[使用提供的HTML签出这支代码笔，显示出您想要的：Code Pen

现在将宽度设置为50%，将高度设置为auto。现在，图像将占据浏览器窗口宽度的50％，并调整其高度以匹配原始纵横比。

这里只是CSS：

.wrapper2 img {
  height: auto;
  width: 50%;
}