在不削减位的情况下使大图像响应

Question

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

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

我的问题是，有没有办法让这些推荐书崩溃成一个单独的专栏，而不是单独剪掉它们？

我不认为有，但没有伤害要问。也许有一种我不知道的新技术..

非常感谢：）

Answer 1

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

我的评论中的例子：

• mediaquerie涉及
• 背景尺寸
• 背景位置
• 多个背景（相同的图像两次设置在2个不同的位置）

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;