Question

如何同时设置max-height:270px和height:auto，以便在内容（图片）过大时缩短尺寸并将其放在270px下，否则应该是auto身高。

我尝试使用overflow-Y，但我不想要滚动条，只是图片的迷你版本。我怎么能这样做？

Answer 1

更改代码:: 尝试

img{
height:100%;
max-height:270px;
}

Answer 2

像这样使用：

height: 0; /*rather than auto*/
max-height: 270px;

Answer 3

像这样使用

height:auto;
max-height: 270;
Overflow:hidden;

如果图像高度高于此值，

max-height会将图像高度限制为该px。如果高度量小于图像高度，则给出任何特定高度将缩放图像。隐藏溢出将隐藏滚动条。

Answer 4

不在图像标记中应用宽度。将您的CSS设置为max-width:100%; max-height:100%;

另请阅读此http://unstoppablerobotninja.com/entry/fluid-images

Answer 5

你会这样做：

<img style="max-height:270px" src="500x500.png" alt="I am resized to 270x270"> 
<img style="max-height:270px" src="200x200.png" alt="I am not resized">

通过不设置高度/宽度，它允许浏览器以原始大小显示图像，直到您通过max-height设置的限制。

虽然省略h / w并不是最佳做法，但它很容易实现你想要做的事情并且只需要花费不到一秒的时间来加载页面，因为浏览器必须在显示它之前计算每个图像大小

示例：jsFiddle

Answer 6

据我所知，你有2个代码，一个用于谷歌浏览器，另一个用于所有其他浏览器如何组合它们。（如果不是，你可以编辑我的代码，以满足你的需求）你可以尝试这样的事情：

<?PHP if($browser == "Chrome"){ ?>
<!--HTML Code for Chrome browser-->
<?PHP }else { ?>
<!--Code for other browsers-->
<?PHP } ?>

这有助于跨浏览器脚本

CSS同时为图像应用Max-height和Auto height属性

6 个答案: