CSS：中心和缩放图像，同时保留宽高比 [英] CSS: center and scale up or down image while preserving aspect ratio

问题描述

如何在保持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 + p>

感谢

解决方案

您可以删除内部img元素， 。

无论图像比例如何，都可以工作。

  .container {margin： 10px; width：115px; height：115px; border：1px solid red;背景：url（http://i.imgur.com/H9lpVkZ.jpg）无重复中心; background-size：包含; }  

 < div class ='container'> ; / div>< div class ='container'style ='width：50px; height：100px; line-height：100px'>< / div> ; height：70px; line-height：70px'>< / div>这个应该向上扩展< 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％;}  

pre class =snippet-code-html lang-html prettyprint-override> < 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>这个应该向上扩展< div class ='container'style = ：350px; height：350px; line-height：350px'> < img class ='resize_fit_center fit_width'src ='http：//i.imgur.com/H9lpVkZ.jpg'/>< / div>

div>

How to center and scale up or down image while preserving aspect ratio in html/css?

I have a fiddle showing my current solution, but it does not scale up the image when needed (see last 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;
}

I need a solution that is working in all major browsers (IE10+)

Thanks

解决方案

You can drop the inner img element and do like this.

This will work no matter image proportions.

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

If you know each image prop. for each container you can simply keep your html and do this.

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

这篇关于CSS：中心和缩放图像，同时保留宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！