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

高度：100％不会保持图像的比例

3 个答案: