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

Question

我正在尝试制作一个包含响应图像的 div。

我尝试了两种选择:

a) 第一个问题是当窗口变小时图像被裁剪(宽度)。

b) 第二个问题是当窗口 --> 图像宽度变小时，垂直空间很大。

我正在考虑保留第一个解决方案并使用 @media 标记并尝试更改其中的一些内容。除非，有一种明显的方法可以轻松更改当前的 css。或者，我可以使用第二种解决方案并尝试更改父 div 设置。

下面的片段:

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。其值应设置为高度与宽度的比率。它之所以有效，是因为填充大小是相对于宽度的。