無法使用CSS自動寬度縮放圖像

Question

我在頁面中放置了以下代碼：

image {
    margin: 0 2px 0 0;
    height: 100px;
    width: auto !important;
    overflow: hidden;
    text-align: center;
}

我想將所有圖像縮放到最大100px的高度，並讓瀏覽器相應地調整其高度。 但是結果是圖像僅裁剪到100像素高度，其余圖像隱藏。

我應該怎么做才能達到縮放效果？ 提前謝謝了！

Answer 1

將img用於圖片而不是圖片，以在其中應用樣式

img{your style here}

Answer 2

您可以通過以下方法達到所需的效果：

img {
  max-height: 100px;
}

您不需要溢出，文本對齊或寬度屬性。 您可以保留邊距屬性，但是上面的代碼解決了您的問題。