0

我又遇到了 Blogger 问题。我正在设计起始页。我确实想在图块中展示片段和标题，它们确实具有固定的高度（200 像素）但动态宽度，因此它可以响应式地工作。

在悬停时，我确实想显示第一张图片，作为背景和“阅读更多”按钮。由于我无法使用

background: url(data:post.firstImageUrl);

我必须找到使用图像标签的解决方案。

我的后备效果很好，因为它被定义为背景并添加了背景大小包含。

我尝试使用预览图像来实现，但看起来像背景大小的封面会起作用。

我尝试使用

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

但它没有用。整个区域都被覆盖了，但图像被拉伸并且没有以正确的纵横比进行缩放。

我真的希望有人知道如何让它工作。最好是仅使用 CSS 的解决方案，但如果您可以使用 javascript 做一些事情，我也会很感激

这是我的测试博客：http: //einneuertestblog.blogspot.ch/

4

3 回答 3

2

如果你这样做：

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;
};
于 2013-09-01T17:44:19.880 回答
0

这就是我设法使图片具有正确的纵横比的方法。但这很好吗？

我不确定你想做什么..

代码：

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

编辑： 我认为最好的方法是在 Photoshop 中创建所有图像......并将其预先定义为您知道的尺寸。

于 2013-09-01T17:39:44.110 回答
0

首先，删除这个：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
于 2013-09-01T17:41:37.503 回答