我如何同时设置max-height:270pxand height:auto，如果内容（图像）太大，它应该缩短它的尺寸并将它放在下面270px，否则它应该是一个auto高度。
我试过了，overflow-Y但我不想要滚动条，只是图片的迷你版。我怎样才能做到这一点？
问问题
20531 次
6 回答
9
更改代码 ::试试看
img{
height:100%;
max-height:270px;
}
于 2013-09-06T09:00:15.163 回答
1
像这样使用
height:auto;
max-height: 270;
Overflow:hidden;
如果图像高度高于该像素，max-height 会将您的图像高度限制为该像素。如果高度量小于图像高度，则给出任何特定高度都会缩放图像。溢出隐藏将隐藏滚动条。
于 2013-09-06T08:44:53.163 回答
0
你只需这样做：
<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.
虽然省略硬件不是最佳实践，但它可以轻松完成您尝试做的事情，并且加载页面只需几分之一秒，因为浏览器必须在显示之前计算每个图像大小。
示例：jsFiddle
于 2013-09-06T09:16:04.987 回答
0
像这样使用：
height: 0; /*rather than auto*/
max-height: 270px;
于 2013-09-06T08:39:27.333 回答
0
不要在图像标签中应用宽度。将你的 CSS 设置为max-width:100%; max-height:100%;
于 2013-09-06T08:54:37.157 回答
-1
据我了解，您有 2 个代码，一个适用于 google chrome，另一个适用于所有其他浏览器，如何组合它们。（如果没有，您可以稍微编辑我的代码以满足您的需求）您可以尝试这样的事情：
<?PHP if($browser == "Chrome"){ ?>
<!--HTML Code for Chrome browser-->
<?PHP }else { ?>
<!--Code for other browsers-->
<?PHP } ?>
这将有助于跨浏览器脚本
于 2013-09-06T10:42:42.323 回答