css - 响应图像和语义 HTML

Question

我经常使用“background-image”css 属性来获得表现良好的响应式图像。我添加以下 CSS:

background-size: cover;
background-position: center center;

这会产生一个居中图像，该图像占据包含的 div/元素的整个空间。

我将它用于作为内容一部分的图像。问题是它在语义上可能不正确，因为背景图像应该设置为装饰而不是内容。我考虑使用以下任一方法来解决此问题:

1. 找到一种使背景图像在语义上更合适的方法。也许将它保存在图形 html 标记中而不是 div 中。也许使用 title 属性替代图像元素的 alt 属性。
2. 提供背景图片相对于普通 img 标签的优势。有没有办法让图像元素覆盖包含的 div 并居中包含 div 的中间？

Answer 1

问好 css 属性 object-fit ( css-tricks )。该行为与 background-size 有点相同，您有一些相同的选项。虽然它对 IE 的支持不是很好，在 Edge 中也只是部分支持(caniuse)。

它有 polyfill。它们虽然不同

• 用javascript计算位置(找到here)
• 将图像作为背景图像(找到 here )(注意有几个 polyfill 可以做到这一点)

我为一个元素推出了自己的方法(它比下面的示例更完整)，但它与选项二中的方法相同。我不确定该设备是否支持媒体对象，因为我不需要它。

如果你喜欢 jsfiddle

if ("objectFit" in document.documentElement.style === false) {
	
	$(".block__image").each(function() {
		
		var $image = $(this);
		if ($image === undefined) {
			return;
		}

		$image
			.parents(".block")
			.css("background-image", "url(" + $image.attr("src") + ")")
			.addClass("block--object-fit");
		
	});
	
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.block {
  height: 25rem;
  width: 30%;
  background-color: deepskyblue;
  overflow: hidden;
  position: relative;
  -webkit-transition: height 200ms;
  transition: height 200ms;
}
@media screen and (min-width: 1000px) {
  .block {
    height: 35rem;
  }
}
.block.block--object-fit {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.block__image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.block--object-fit .block__image {
  opacity: 0;
}

.block__image-alternative {
  max-height: 100%;
  max-width: auto;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
	<img src="https://source.unsplash.com/cXU6tNxhub0/1600x900" alt="" class="block__image">
</div>