Question

我正在使用Magnific Popup并排显示两半内容;左侧是一个带有背景图像的div，可以有两种不同的尺寸，但问题是我正在努力设置具有响应尺寸的图像来填充它们的容器。

目前，我必须为每个设置手动宽度和高度，我正试图避免。我选择了背景图片而不是img元素，因此我可以在移动设备上显示不同的图像。

我尝试了各种background-size，position和height值无济于事。我想如果我理解这个问题，我会更好地解决它。我假设问题出在图像div的一个容器上。

HTML：

<div class="left-half">
<div class="popup-screenshot" id="mts-screenshot"></div>
</div>
<div class="right-half">
<h3>Description</h3>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
<p>
<h3>Details</h3>
<ul>
<li><span>Date:</span> December 2011 - Present</li>
<li><span>Category:</span> Design/development</li>
<li><span>Technologies:</span> XHTML/CSS3, JavaScript/jQuery</li>
</ul>
</p>
<p><a href="http://www.mtscollective.com" target="_blank" class="btn btn-primary btn-xl">Launch Website</a></p>
</div>

CSS：

.left-half, .white-popup .right-half {
  margin: 20px;
}
.left-half {
  width: 50%;
  float: left;
}
.right-half {
  width: 40%;
}
.popup-screenshot {
  width: 600px;
  height: 450px;
  background-size: 100% 100%;
}
#mts-screenshot {
  background-image: url("http://i.imgur.com/upKnQUT.png");
}
div#mtsm-popup {
  max-width: 800px;
}
div#mtsm-popup .left-half {
  width: 30%;
}
div#mtsm-popup .right-half {
  width: 55%;
}
div#mtsm-screenshot.popup-screenshot {
  width: 266px;
  height: 542px;
  background-size: 100% 100%;
}
#mtsm-screenshot {
  background-image: url("http://i.imgur.com/NghCrTD.jpg");
}
#api-screenshot {
  background-image: url("http://i.imgur.com/Wysc9he.png");
}
.right-half {
  float: right;
  text-align: left;
}

演示：http://jsfiddle.net/3gLyhad3/1/

任何帮助都会非常感激！

Answer 1

首先：像素来自90年代，如果您的目标是repsonsiveness，请使用vw（=视口宽度），vh（=视口高度）和％。所有这些单元都是为响应式站点而设计的，如果您重新调整浏览器，它们将自动重新调整。注意：100vw = 100％然后：添加＆＃39; center top＆＃34;在你的url-css-function之后，避免div将图像的错误部分作为背景下一步：设置宽度和高度通常都没有意义，决定将宽度或高度的字符串定义为定义的值，并将另一个设置为＆＃39; auto＆＃39;。

专业提示：   您可以制作仅适用于特定要求的@ media＆＃39; -rules。例如：
      @media screen和（max-width：768px）{           .left-half {               宽度：80％;           }       }

这将使＆＃39; .left-half＆＃39;屏幕小于768像素时的宽度为80％，如果是屏幕。

问题与背景图像和响应性

1 个答案: