Html CSS同时为图像应用“最大高度”和“自动高度”属性

如何同时设置

max height:270px

和

height:auto

，以便如果内容（图像）太大，它应该缩短其尺寸并将其置于

270px

下，否则它应该是

auto

高度

我试过使用

overflow-Y

，但我不想要滚动条，只想要一个迷你版的图片。我该怎么做呢？

像这样使用：

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

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

像这样使用

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

如果图像高度高于该像素，则“最大高度”会将图像高度限制为该像素。 如果高度量小于图像高度，则给定任何特定高度将缩放图像。

---

溢出隐藏将隐藏滚动条。

请勿在图像标记中应用宽度。将css设置为

最大宽度：100%；最大高度：100%

另外，请阅读此更改代码：
试试看

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

你可以这样做：

<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不是最佳做法，但它很容易完成您尝试执行的操作，而且加载页面只需多花几分之一秒，因为浏览器必须在显示之前计算每个图像的大小

示例：
据我所知，您有两个代码，一个用于google chrome，另一个用于所有其他浏览器如何组合它们。（如果没有，您可以稍微编辑我的代码以满足您的需要）
您可以尝试以下方法：

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

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



这将有助于跨浏览器脚本
Naa。一切都溢出来了。图像从div选项卡中取出，并覆盖在其他div上。即使是包含文本内容的div也会溢出。您尝试过0px或0%吗？px和%，图像溢出了大小限制。我感觉还有其他尝试高度：1em；这就解决了你的问题。我不理解它。例如，你有一个绝对高度为500px的图像。但图像的最大高度应为270px。但是你想用高度做什么：auto？用auto我想如果一个图像的大小是，比如说100px，div高度应该自动设置为100px，但在最坏的情况下，就像在500px中一样，它不应该超限270px不是
max height:270px
单独响应你的需要吗？溢出隐藏会剪切图像。它不显示完整的图像。我希望大图像自动缩短其尺寸。目前，使用
高度：270px
，大图像会适当缩短，但具有小图像或文本内容的div也具有相同的270px高度，从而浪费空间。我想要像
auto
这样的东西。溢出隐藏会剪切图像。它不显示完整的图像。我希望大图像自动缩短其尺寸。当前高度为270px时，大图像会适当缩短，但具有小图像或文本内容的div也具有相同的270px高度，从而浪费空间。我想要像auto这样的东西。你试过了吗？？？它不应该剪切图像..我使用了
overflow:hidden在wrapper div中…我对该图像的最大高度和宽度设置了一个限制…这意味着如果超过限制，照片将被调整大小…没有裁剪的机会…
溢出：隐藏在包装div中使用，仅覆盖我要调整大小的图像拍摄的整个区域。如果我设置
height:270px
图像会自动调整为270px，但其他div也会调整为270px（我不想要）。使用
溢出：隐藏
只能看到图像的一部分。