Question

我的图像高度在309px到550px之间。无论浏览器窗口的大小如何，我希望它们始终按比例缩放到相同的高度。

我将此代码用于图像：

<img src="image1.jpg" style="max-height:309px;">
<img src="image2.jpg" style="max-height:309px;">

在大型桌面屏幕上查看时，我可以将image1和image2缩放到相同的309px高度。然而，当在移动电话（或适当缩小的浏览器）上观看时，image2（实际上是550px高）看起来比image1（高309px）高。随着浏览器收缩，图像需要缩放，但仍然保持相同的高度。

有没有办法确保无论屏幕大小如何，所有图像都显示在彼此相同的高度？我事先并不知道哪些图像是309px，哪些图像是550px（或介于两者之间）。

Answer 1

＆＃34;图像需要随着浏览器的缩小而缩放，但仍然保持相同的高度。＆＃34;它们随着浏览器高度的缩小而缩放。然后它同样缩小你的imgs的高度：

JSFiddle（你可以在哪里玩高度：http://jsfiddle.net/Lhmqu4xn/

＆＃13;

img {
  max-height:309px;  
}


@media screen and (max-height: 309px) and (min-height:200px) {
  img {
      max-height:200px;  
    }
}

@media screen and (max-height: 199px) {
  img {
      max-height:100px;  
    }
}

＆＃13;

<img src="http://placehold.it/50x550">
<img src="http://placehold.it/75x309">
<img src="http://placehold.it/50x609">

＆＃13;

Answer 2

做这样的事情：

<强> HTML

  <div class="image-ccontainer">

       image goes here

  </div><!-- End image container -->

<强> CSS

 .image-container {
       width: 309px;
       height: 550px;
       overflow: hidden; /* Cuts the image to measure
       the given width/height if it's excess */
    }



.image-container img {
   width: 100%;
   height: auto; /* Auto height for the image reduces detoriation */
}

注意：确保图像高于.image-container的给定宽度;如果没有，你将使第二个CSS中图像的高度与.image-container相同。

当浏览器窗口缩小时，如何使图像彼此高度相同

2 个答案: