使用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%; } 

DEMO：http://jsfiddle.net/6krx9bte/

注意：

• 使用百分比值时，您可能不需要媒体查询来重新调整图像大小。
• The <main> element is not supported by Internet Explorer。考虑将每个<img>包装在<figure>元素中，并将该论坛包装在<div>，<article>或其他适合上下文的元素中。