CSS 背景图像的缩放比例与 <img> 不同？ [复制]

Posted 2023-03-05

【中文标题】CSS 背景图像的缩放比例与 <img> 不同？ [复制]

【英文标题】：CSS background image scales differently than <img>? [duplicate]

【发布时间】：2016-06-23 17:03:39

【问题描述】：

这是我在这里的第一个问题，如果我的问题可能不是重点，请原谅。

在照片报道中，我有大约 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"   >

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

【参考方案1】：

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

【参考方案2】：

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

您可以使用Modernizr 来检查浏览器功能，并使用this script。 这将使用图像src 属性作为background-image，并将执行类似的操作。