0

这是我在这里的第一个问题，所以如果我的问题可能不正确，请原谅。

在照片报道中，我有大约 30 张高分辨率图片，我通过 CSS 加载这些图片，因为我认为它可能比使用“img”标签具有速度优势。

这是 30 张图片之一的代码：

.image-bg-fixed-height2 {
    display: table;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    text-align: center;
    color: #fff;
    background: url(../Snapshots/Adasevci_02.jpg) no-repeat center center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

但是在 HTML 中，当我使用 CSS 中指定的“img”标签时

img {
    max-width: 100%;
    height: auto;
    padding: 10px 0;
}

使用 CSS 方法和“img”的图像缩放不同。“img”似乎挤在移动设备上。我希望图片表现得像 CSS 类。

<aside class="image-bg-fixed-height2"></aside>
<img src="http://www.jagaland.de/moteladasevci/Snapshots/Adasevci_02.jpg" border="0" class="image-bg-fixed-height2" width="1920px" height="1080px" alt="This is the alt text 2">

它看起来很棒，并且对 CSS 方法有响应，但我通过 alt 文本失去了 SEO 功能，这对我的照片报道来说是不行的。

4

2 回答 2

0

object-fitCSS 属性可以做到这一点，但在 Internet Explorer 上根本不支持（来源：caniuse.com）。

您可以使用Modernizr来检查浏览器功能，并使用此脚本。这将使用 imagesrc属性 as background-image，并将执行类似的操作。

于 2016-03-09T11:26:39.233 回答
0

如果您正在使用<img>css width:100%，或者max-width:100%;它会自动挤压，因此您可以通过删除width:100%来响应管理它，auto但最好的是您可以在后台 css 中使用它和 cssbackground-size:cover;

于 2016-03-09T11:06:48.767 回答