Question

说明图片： https://dl.dropboxusercontent.com/u/397267/css-problem.jpg

大家好，

我需要你的帮助。我想在网页上放一些截图。屏幕截图不得大于其原始大小（图01）。如果它们的视口比图片原始大小宽，则图片应该只是居中而没有背景。

当视口比图片小时，图片应该按比例缩小！（图03）

我试过这种方式，但这并没有奏效。 background-size：contains 可以很好地调整我的屏幕截图（高度/宽度），但div保持其高度（图片04），所以我需要你的帮助我如何解决这个问题？

.w01-startseite {
position: relative;
width: 100%;
height: 882px;
min-height: 300px;
background: url(01_startseite.png) no-repeat;
background-position: top center;
background-size: contain;

}

Answer 1

您可以尝试这样的事情：

/* HTML sample */
<div class="Screenshot" style="background-image: url(http://lorempixel.com/1200/1200/sports/)"></div>

<div class="Screenshot" style="background-image: url(http://lorempixel.com/1200/1200/sports/)"></div>

/* CSS */
.Screenshot {
  overflow: hidden;

  margin: 2em auto;
  max-height: 1200px;
  max-width: 1200px;

  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
 }

/**
 * 1. Adjust this value to alter the aspect ratio.
 */
.Screenshot:before {
  display: block;

  padding-top: 50%; /* 1 */

  content: "";
 }

示例：http://codepen.io/defo550/pen/GgMeBp

如何以100％宽度的顺序放置具有背景图像的div？

1 个答案: