CSS:居中并放大或缩小图像，同时保持纵横比 [英] CSS: center and scale up or down image while preserving aspect ratio

查看：21
本文介绍了CSS:居中并放大或缩小图像，同时保持纵横比的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在 html/css 中保持纵横比的同时居中和放大或缩小图像?

我有一个显示我当前解决方案的小提琴，但它在需要时没有放大图像(见最后一个 div):http://jsfiddle.net/4Mvan/438/

.container {边距:10px；宽度:115px；高度:115px；行高:115px；文本对齐:居中；边框:1px纯红色；}.resize_fit_center {最大宽度:100%；最大高度:100%；垂直对齐:中间；}

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

谢谢

解决方案

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

无论图像比例如何，这都会起作用.

.container {边距:10px；宽度:115px；高度:115px；边框:1px纯红色；背景:url(http://i.imgur.com/H9lpVkZ.jpg) 无重复中心；背景大小:包含；}

<div class='container' style='width:50px;height:100px;line-height:100px'>

<div class='container' style='width:140px;height:70px;line-height:70px'>

这个应该扩大规模<div class='container' style='width:350px;height:350px;line-height:350px'>

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

.container {边距:10px；宽度:115px；高度:115px；行高:115px；文本对齐:居中；边框:1px纯红色；}.resize_fit_center {垂直对齐:中间；}.fit_width {宽度:100%；}.fit_height {高度:100%；}

<img class='resize_fit_center fit_width'src='http://i.imgur.com/H9lpVkZ.jpg'/>
<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 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 class='container' style='width:350px;height:350px;line-height:350px'><img class='resize_fit_center fit_width'src='http://i.imgur.com/H9lpVkZ.jpg'/>

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆