Question

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

index.js

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

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

找到一种方法，使背景图像在语义上更合适。也许把它放在一个数字html标签而不是div。也许使用title属性替换image元素的alt属性。
为普通// 2 commands together make spamming work :) case '?SPAM': spamCtrl.setChannel(message.channel); spamCtrl.setStatus(true); break; case '?STOP-SPAM': spamCtrl.setStatus(false); break;标记提供背景图像的优势。是否有一种方法可以让图像元素覆盖包含div并且也可以居中于包含div的中间？

Answer 1

向css属性object-fit（css-tricks）问好。行为有点像background-size，你有点相同的选择。虽然对IE的支持并不是很好，但只有部分在Edge（caniuse）。

有聚酯填充剂。虽然它们不同但

使用javascript （找到here）
将图片作为背景图片（找到here）（请注意，有几个填充图片可以执行此操作）

我为项目推出了自己的项目（它比下面的示例更完整），但它与选项二中的方法相同。我不确定那个媒体对象的支持，因为我没有必要。

如果您更喜欢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>

响应图像和语义HTML

1 个答案: