Question

说我的图像是400x200像素。我想让它适应任何div，直到没有垂直或水平空间。所以在编程中我会这样说..

if (imgHeight < divHeight || imgWidth < divWidth) {
zoomIt until true and center it vertically and horizontally.

例如，取400宽度图像和100高度。现在我希望这个图像的高度增加，直到它的高度也是200.但是因为它必须保持比率。它的宽度将是800.现在它需要水平居中。因为div只显示0 - 400而其余400则被隐藏。需要显示200到600 ..

链接为重复的问题并不能只解决它的问题。

Answer 1

这是一个纯CSS解决方案，其中诀窍在margin:auto和display:block应用于img。请参阅下面的代码段：

＆＃13;

.wrap {
  border: 1px solid red; /* demo purposes */
  padding: 10px; /* demo purposes */
  box-sizing: border-box; /* demo purposes */
  height: 70%; /* whatever you like */
  width:70%; /* whatever you like */
  margin: auto;

}

img {
  display: block; /*fix img gap */
  margin:auto;
  max-height: 100%;
  max-width: 100%
  width:auto;
  height:auto;
}

＆＃13;

<h1>HORIZONTAL</h1>
<div class="wrap">
  <img src="http://placehold.it/400x200" />
</div>
<hr/>
<h1>VERTICAL</h1>
<div class="wrap">
  <img src="http://placehold.it/200x400" />
</div>

＆＃13;

Answer 2

经过一番研究后，我认为这种方法效果最好：

Jsfiddle： http://jsfiddle.net/yhuL4ucy/

background-image: url('..');
background-position: center center;
background-size: cover;

调整图像大小覆盖宽度和/或高度并使其居中

2 个答案: