高度：100％不會保持圖像的比例

Question

我再次遇到Blogger的問題。 我正在為起始頁面設計樣式。 我確實想要在瓷磚中展示片段和標題，它們具有固定的高度（200px）但是具有動態寬度，因此它的響應性很強。

在懸停時，我確實想要顯示第一個圖像，作為背景和“閱讀更多”按鈕。 既然我不能用

background: url(data:post.firstImageUrl);

我必須找到使用圖像標簽的解決方案。

我的后備工作很好，因為它被定義為背景並添加了背景大小。

我試圖用預覽圖像實現的，雖然看起來像背景大小的封面會起作用。

我試過用

img{
  height: 100%
  min-width: 100%; 
}

但它沒有用。 整個區域被遮蓋但圖像被拉伸而沒有按正確的寬高比縮放。

我真的希望有人知道如何才能讓它發揮作用。 最好只是一個CSS解決方案，但如果你可以用javascript做什么我也很感激

這是我的testblog： http ：//einneuertestblog.blogspot.ch/

Answer 1

如果你這樣做：

img {
    height: 100%;
    min-width: 100%;
}

您告訴您的圖像至少是其容器寬度的100％，並始終是其容器高度的100％。

試試這些：

/* 1OO% of the container's width and proportional height */
img {
    width: 100%;
    height: auto;
}

/* 1OO% of the container's height and proportional width */
img {
    width: auto;
    height: 100%;
}

/* 1OO% of the image's original width maximum and proportional height, resize the image down if needed but prevent the image to be bigger than its original size */
img {
    max-width: 100%;
    height: auto;
};

Answer 2

這就是我設法將圖片調整到正確的寬高比。 但這樣好嗎？

我不確定你要做什么..

CSS代碼：

height: 300px !important;
min-width: initial !important;
overflow: hidden;

編輯：我認為最好的方法是在photoshop中創建所有圖像..然后按照您知道的尺寸預先定義區域。

Answer 3

首先，刪除它： min-width: 100% !important; 。 通常，您應該避免使用!important規則。

如果要保持縱橫比，則需要將圖像width設置為auto （不會被min-width覆蓋）。 了解如何更改CSS以實現這一目標。

順便說一下。 你可能想要清理那個CSS或者從頭開始編寫它，因為相同的規則寫在6-7個不同的行上，這真的很糟糕。

編輯

要以困難的方式解決它，請將這些規則添加到您的圖像：

width: auto; // keeps the aspect ratio
max-width: initial !important;  // overrides the default !important rules set by Blogger (?)
height: 100%; // stretches the image vertically inside the parent element