如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
我以这种方式在超链接内水平和垂直居中并按比例缩放图像:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
它在Internet Explorer、Firefox和Safari中进行了测试。
有关居中的更多信息,请参阅此处。
其他回答
这里有一个解决方案,即使提供的图像太小或太大,无法容纳div,它也可以在div中垂直和水平对齐img,而不进行任何拉伸。
HTML内容:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
CSS内容:
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
jQuery部分:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
不要将显式宽度或高度应用于图像标记。相反,给它:
max-width:100%;
max-height:100%;
此外,高度:自动;如果只想指定宽度。
例子:http://jsfiddle.net/xwrvxser/1/
国际货币基金组织{最大宽度:100%;最大高度:100%;}.肖像{高度:80px;宽度:30px;}.景观{高度:30px;宽度:80px;}.方形{高度:75px;宽度:75px;}纵向分区<div class=“纵向”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>景观部<div class=“landscape”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>方形分区<div class=“square”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>
编辑:以前基于表格的图像定位在Internet Explorer 11中存在问题(最大高度在显示中不起作用:表格元素)。我将其替换为基于内联的定位,这不仅在InternetExplorer7和InternetExplorer11中都很好,而且还需要更少的代码。
这是我对这个问题的看法。只有当容器具有指定的大小(最大宽度和最大高度似乎不适合没有具体大小的容器)时,它才会起作用,但我以允许重用的方式编写了CSS内容(在现有容器中添加相框类和px125大小类)。
在CSS中:
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
在HTML中:
<a href="#" class="picture-frame px125">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
演示
/*主样式*/.相框{垂直对齐:顶部;显示:内联块;文本对齐:居中;}.picture-frame.px32{宽度:32px;高度:32px;线条高度:32px;}.picture-frame.px125{宽度:125px;高度:125px;线条高度:125px;}.相框img{页边空白:-4px;/*使用垂直对齐定位时,由于某些原因,内联图像有轻微偏移*/最大宽度:100%;最大高度:100%;显示:内联块;垂直对齐:中间;边框:0;/*在Internet Explorer中删除锚定中包含的图像的边框*/}/*额外费用*/.相框{填充:5px;}框架{边框:1px实心黑色;}<p>32像素</p><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/lesa2wS.png"/></a><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/kFMJxdZ.png"/></a><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/BDabZj0.png"/></a><p>125像素</p><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/lesa2wS.png"/></a><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/kFMJxdZ.png"/></a><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/BDabZj0.png"/></a>
编辑:使用JavaScript可能进一步改进(放大图像):
function fixImage(img)
{
var $this = $(img);
var parent = $this.closest('.picture-frame');
if ($this.width() == parent.width() || $this.height() == parent.height())
return;
if ($this.width() > $this.height())
$this.css('width', parent.width() + 'px');
else
$this.css('height', parent.height() + 'px');
}
$('.picture-frame img:visible').each(function
{
if (this.complete)
fixImage(this);
else
this.onload = function(){ fixImage(this) };
});
您必须告诉浏览器您放置它的高度:
.example {
height: 220px; /* DEFINE HEIGHT */
background: url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
以下内容非常适合我:
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}