避免在响应部分(CSS中加载的背景图像)中的IMG裁剪

Question

我正在尝试制作包含映像响应的DIV。

我尝试了两个选项：

a(第一个问题是当窗口尺寸较小时，图像会裁剪(宽度(。

b(第二个问题是，当窗口宽度变小时，垂直空间垂直空间。

我正在考虑留在第一个解决方案中，然后使用@media标签，然后尝试在那里更改一些内容。除非有一个明显的方法可以轻松更改当前的CSS。另外，我可以使用第二个解决方案，然后尝试更改父 div设置。

snipplet下面：

blockquote {
	padding: 700px 0 0 0;
	margin: 10px 0 25px 0;
}
.section {
  background:#ccc;
	position: relative;
	padding: 94px 0 67px 0;
	display: block;
	border-bottom: 1px solid #d8d8d8;
}
#quotes-wrapper {
	height: 100%;
	width: auto;
	background: url(http://www.apolosiskos.co.uk/references.jpg) no-repeat center center fixed;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: block;
	background-attachment: fixed;
	position: relative
}
 
#quotes-wrapper2 {
    background: url(http://www.apolosiskos.co.uk/references.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

<section class="section no-padding" id="section4">
  <div id="ancor4"></div>
  <div id="quotes-wrapper">
   
        <blockquote>
          <p>&quot;Skillmap&quot;</p>
        </blockquote>
  
    <div class="overlay2"></div>
  </div>
</section>
<section class="section no-padding">
  <div id="quotes-wrapper2">
   
        <blockquote>
          <p>&quot;Skillmap&quot;</p>
        </blockquote>
  
    <div class="overlay2"></div>
  </div>
</section>

Answer 1

如果我理解您的问题，我建议按比例用背景扩展DIV：

.quotes-wrapper {
  background-image: url(http://www.apolosiskos.co.uk/references.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 66.6%;
}

<div class="quotes-wrapper">
  <blockquote>
    <p>&quot;Skillmap&quot;</p>
  </blockquote>
</div>

它不会裁剪，并且不会在没有背景的情况下创造空白。重要的部分是quotes-wrapper中的padding-top。其值应设置为高度与宽度的比率。它之所以起作用，是因为填充大小相对于宽度。