Question

如何在保留html / css中的宽高比的同时居中和放大或缩小图像？

我有一个小提示，显示我当前的解决方案，但它不会在需要时放大图像（参见最后一个div）：http://jsfiddle.net/4Mvan/438/

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}

.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

我需要一个适用于所有主流浏览器的解决方案（IE10 +）

由于

Answer 1

您可以删除内部img元素并执行此操作。

无论图像比例如何，都可以使用。

＆＃13;

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    border: 1px solid red;
    background: url(http://i.imgur.com/H9lpVkZ.jpg) no-repeat center center;
    background-size: contain;    
}

＆＃13;

<div class='container'>
</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>
</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>
</div>

This one should scale up
<div class='container' style='width:350px;height:350px;line-height:350px'>
</div>

＆＃13;

如果你知道每个图像道具。对于每个容器，您只需保留您的HTML并执行此操作。

＆＃13;

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    vertical-align: middle;
}
.fit_width {
    width:100%;
}
.fit_height {
    height:100%;
}

＆＃13;

<div class='container'>
    <img class='resize_fit_center fit_width'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>
    <img class='resize_fit_center fit_width'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>
    <img class='resize_fit_center fit_height'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

This one should scale up
<div class='container' style='width:350px;height:350px;line-height:350px'>
    <img class='resize_fit_center fit_width'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

＆＃13;

Answer 2

如果您提前知道图像的宽高比，则可以使用宽高比的媒体查询。

在这种情况下，我知道我的图像的宽高比为4：3。

通过媒体查询，我可以在高度为限制尺寸（宽高比大于4/3）时填充高度，并在宽度为限制尺寸时填充宽度。

img {
  height: 100%;
  width: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

@media screen and (max-aspect-ratio: 4/3) {
  img {
    height: auto;
    width: 100%;
  }
}

https://jsfiddle.net/0cjc23oz/

Answer 3

添加宽度：100％;高度：自动; 到.resize_fit_center，所以它变为：

.resize_fit_center {
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Answer 4

嗯，你使用固定宽度的元素。尝试使用相对单位（％）并使max-width为100％。我认为这会奏效。

CSS：在保持纵横比的同时居中和放大或缩小图像

4 个答案: