不能响应地缩小图像超过一定大小的CSS

Question

我在一个元素中有三个相邻的图像，我试图用CSS缩小它们。

<main>
    <img src="img1.png" alt="logo1" />
    <img src="img2.png" alt="logo2" />
    <img src="img3.png" alt="logo3" />
</main>

到目前为止，我已经设法通过将它们的宽度和高度设置为vh和vw的百分比来缩小它们(当方向为纵向时为vh，当方向为横向时为vw)。

@media screen and (orientation: portrait) {
    main img {
        width: 25vh;
        height: 25vh;
    }
}
@media screen and (orientation: landscape) {
    main img {
        width: 25vw;
        height: 25vw;
    }
}

我发现令人沮丧的是，虽然，当视口的宽度小于一定的宽度(取决于视口高度，太)，图像不再收缩，只是定位自己低于其他。

如何将它们缩小到最小尺寸，使布局不会改变?

Answer 1

使用percentages代替vh和vw，并删除媒体查询:

width: 25%;

Answer 2

HTML

<main>
    <img src="http://i.imgur.com/60PVLis.png" alt="logo1">
    <img src="http://i.imgur.com/60PVLis.png" alt="logo2">
    <img src="http://i.imgur.com/60PVLis.png" alt="logo3">
</main>

CSS

img { width: 30%; } 

演示:http://jsfiddle.net/6krx9bte/

指出:

• 当您使用百分比值时，您可能不需要媒体查询图像大小。
• ie浏览器不支持<main>元素。考虑在<figure>元素中包装每个<img>，并在<div>、<article>或其他适合上下文的元素中包装该组。