javascript - 使大图像具有响应性而无需裁剪位

Question

我在为一个客户工作，我有很多这些图片目前正在他们的网站上使用，但它并不理想，因为它不适用于响应能力。

我有大约 8 个大小不一的。

我的问题是，有没有一种方法可以让这些推荐信折叠成一个单独的列，而无需单独剪切它们？

我认为没有，但问问也无妨。也许有一项我还没有想到的新技术..

非常感谢:)

Answer 1

不太确定回答这个问题是个好主意。

我评论的例子:

• 涉及媒体查询
• 背景大小
• 背景位置
• 多背景(相同的图像两次设置在 2 个不同的位置)

https://codepen.io/gc-nomade/pen/JLLdvJ

.fake {
  border:solid blue;
  width:80%;
  margin:1em auto;
  padding-top:121.4%;
  background:
    url(/image/UuSbG.jpg) top left no-repeat,
    url(/image/UuSbG.jpg) bottom right no-repeat;
  background-size: 100% auto;
}
@media (max-width: 800px) {
  .fake {
     background-size: 200% auto;
     padding-top:442.8%;
  }
}

<div class="fake"></div>