【问题标题】:CSS: center and scale up or down image while preserving aspect ratioCSS:在保持纵横比的同时居中并放大或缩小图像
【发布时间】:2017-04-20 06:33:06
【问题描述】:

如何在 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+) 的解决方案

谢谢

【问题讨论】:

  • 您希望最后一张图片的宽度与其父图片的宽度相同?

标签: html css responsive-design


【解决方案1】:

您可以删除内部 img 元素并这样做。

无论图像比例如何,这都会起作用。

.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;    
}
<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>

如果您知道每个图像道具。对于每个容器,您可以简单地保留您的 html 并执行此操作。

.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%;
}
<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>

【讨论】:

  • 是行高:115px;和文本对齐:居中;仍然需要在您的第一个解决方案中居中?
  • 感谢您的快速回复。
【解决方案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/

【讨论】:

    【解决方案3】:

    添加宽度:100%; height:auto; 到你的 .resize_fit_center 所以它变成这样:

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

    【讨论】:

    • 第 3 幅图像使用此解决方案被拉伸,如果您在宽度/高度上切换自动/100%,其他图像将垂直拉伸。
    • @LGSon 你是对的。我没有注意到第三张图片上丢失的比例,真可惜。
    【解决方案4】:

    好吧,您正在为元素使用固定宽度。尝试使用相对单位(以 % 为单位)并将最大宽度设为 100%。我认为这会奏效。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-16
      • 1970-01-01
      • 1970-01-01
      • 2012-10-11
      • 2010-11-25
      相关资源
      最近更新 更多