Question

这是我在这里提出的第一个问题，所以请原谅我的问题可能没有问题。

在一张照片报告文件中，我有大约30张高分辨率图片，我加载了CSS，因为我认为它可能比使用“img＆＃39;标签

这里是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;
}

然而，当我使用＆＃39; img＆＃39; CSS中指定的标签，如

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

使用CSS方法和＆＃39; img＆＃39;规模不同。＆＃39; img＆＃39;似乎挤在移动设备上。我希望图片的行为与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方法反应灵敏，但是我通过替代文字丢失了SEO功能，这对于我的照片报道来说是不行的。

Answer 1

如果您使用<img> css width:100%或max-width:100%;，那么它会自动挤压，以便您可以在将width:100%移至auto时进行管理但最好的是你可以在css background-size:cover;

的后台css中使用它

Answer 2

object-fit CSS property执行此操作，但在Internet Explorer上完全不受支持（来源：caniuse.com）。

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

CSS背景图像的缩放程度与<img/>不同？

2 个答案: