我需要将此图像拉伸到可能的最大尺寸，而不会使其溢出<div>或使图像偏斜。
我无法预测图像的宽高比，因此无法知道是否使用：
<img src="url" style="width: 100%;">或
<img src="url" style="height: 100%;">我不能同时使用两者（即style =“width：100％; height：100％;”）因为这会拉伸图像以适合<div>。
<div>的大小按屏幕的百分比设置，这也是不可预测的。
答案 0 :(得分：172)
2016年更新：
现代浏览器的表现要好得多。您需要做的就是将图像宽度设置为100％（demo）
.container img {
width: 100%;
}
由于您不知道宽高比，因此您必须使用一些脚本。以下是我将如何使用jQuery（demo）：
CSS
.container {
width: 40%;
height: 40%;
background: #444;
margin: 0 auto;
}
.container img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.container img.tall {
max-height: 100%;
max-width: 100%;
width: auto;
}
HTML
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
<img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>
脚本
$(window).load(function(){
$('.container').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
答案 1 :(得分：68)
不是一个完美的解决方案，但这个CSS可能有所帮助。缩放是使这个代码工作的原因，理论上理论上这个因素对于小图像来说理想上是理想的 - 但在大多数情况下，2,4或8可以正常工作。
#myImage {
zoom: 2; //increase if you have very small images
display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
答案 2 :(得分：65)
只使用CSS和HTML更容易实现此目的：
<强> HTML：
<div class="fill"></div>
<强> CSS：
.fill {
overflow: hidden;
background-size: cover;
background-position: center;
background-image: url('path/to/image.jpg');
}
这会将您的图片作为背景，并将其拉伸以适应div尺寸而不会失真。
答案 3 :(得分：28)
如果可以，请使用背景图片并设置background-size: cover。这将使背景覆盖整个元素。
CSS
div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
如果您仍然坚持使用内联图片，则有一些选项。首先，有
<强>对象配合
此属性作用于与background-size: cover类似的图像，视频和其他对象。
CSS
img {
object-fit: cover;
}
可悲的是，browser support并不是那么好用IE到版本11根本不支持它。下一个选项使用jQuery
CSS + jQuery
HTML
<div>
<img src="image.png" class="cover-image">
</div>
CSS
div {
height: 8em;
width: 15em;
}
(function ($) {
$.fn.coverImage = function(contain) {
this.each(function() {
var $this = $(this),
src = $this.get(0).src,
$wrapper = $this.parent();
if (contain) {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/contain no-repeat'
});
} else {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/cover no-repeat'
});
}
$this.remove();
});
return this;
};
})(jQuery);
使用像这样的插件
jQuery('.cover-image').coverImage();
将拍摄图像，将其设置为图像的包装元素上的背景图像，然后从文档中删除img标记。最后你可以使用
纯CSS
您可以将此作为后备使用。图像将向上扩展以覆盖它的容器，但它不会缩小。
CSS
div {
height: 8em;
width: 15em;
overflow: hidden;
}
div img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
max-width: none;
max-height: none;
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
希望这可能有助于某人，快乐的编码！
答案 4 :(得分：12)
感谢CSS3
img
{
object-fit: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
IE和EDGE一如既往地局外人： http://caniuse.com/#feat=object-fit
答案 5 :(得分：6)
仅使用HTML和CSS是不可能的，或者至少非常奇特和复杂。如果你愿意抛出一些javascript，这里有一个使用jQuery的解决方案：
$(function() {
$(window).resize(function() {
var $i = $('img#image_to_resize');
var $c = $img.parent();
var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();
$i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
});
$(window).resize();
});
这将调整图像的大小，使其始终适合父元素，无论其大小如何。由于它绑定到$(window).resize()事件，当用户调整窗口大小时，图像将会调整。
这并不是试图将图像置于容器中心，这是可能的，但我想这不是你想要的。
答案 6 :(得分：5)
设置外container div的宽度和高度。然后在img上使用以下样式：
.container img{
width:100%;
height:auto;
max-height:100%;
}
这有助于您保持img的宽高比
答案 7 :(得分：4)
我遇到了这个搜索类似问题的问题。我正在制作一个响应式设计的网页，并且页面上放置的元素宽度设置为屏幕宽度的百分比。高度设置为vw值。
由于我使用PHP和数据库后端添加帖子，纯CSS无法实现。然而我确实发现jQuery / javascript解决方案有点麻烦，所以我想出了一个整洁的（所以我认为自己至少）解决方案。
HTML（或php）
div.imgfill {
float: left;
position: relative;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
width: 33.333%;
height: 18vw;
border: 1px solid black; /*frame of the image*/
margin: -1px;
}<div class="imgfill" style="background-image:url(source/image.jpg);">
This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
This might be some info
</div>
使用style =＆＃34;＆＃34;让PHP动态更新我的页面并将CSS样式与style =＆＃34;＆＃34;一起使用是可行的。将以完美覆盖的图像结束，缩放以覆盖动态div标签。
答案 8 :(得分：3)
使用此方法，您可以使用div和图像的图像变化比率填充div。
<强> jQuery的：
$(window).load(function(){
$('body').find(.fillme).each(function(){
var fillmeval = $(this).width()/$(this).height();
var imgval = $this.children('img').width()/$this.children('img').height();
var imgClass;
if(imgval > fillmeval){
imgClass = "stretchy";
}else{
imgClass = "stretchx";
}
$(this).children('img').addClass(imgClass);
});
});
<强> HTML：
<div class="fillme">
<img src="../images/myimg.jpg" />
</div>
<强> CSS：
.fillme{
overflow:hidden;
}
.fillme img.stretchx{
height:auto;
width:100%;
}
.fillme img.stretchy{
height:100%;
width:auto;
}
答案 9 :(得分：3)
您可以在父div上使用object-fit: cover;。
答案 10 :(得分：3)
这对我来说很有把戏
div img {
width: 100%;
min-height: 500px;
width: 100vw;
height: 100vh;
object-fit: cover;
}
答案 11 :(得分：3)
要使此图像拉伸至最大尺寸而不会溢出，或者使图像倾斜。
...应用
img {
object-fit: cover;
height: -webkit-fill-available;
}
图像样式。
答案 12 :(得分：3)
如果要在保持图像宽高比的同时设置最大宽度或高度（使其不会非常大），您可以这样做：
img{
object-fit: contain;
max-height: 70px;
}
答案 13 :(得分：2)
如果您使用IMG标签，则很容易。
我做到了：
<style>
#pic{
height: 400px;
width: 400px;
}
#pic img{
height: 225px;
position: relative;
margin: 0 auto;
}
</style>
<div id="pic"><img src="images/menu.png"></div>
$(document).ready(function(){
$('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}
但我没有找到如何使用#pic {background：url（img / menu.png）} Enyone？ 感谢
答案 14 :(得分：1)
HTML：
<style>
#foo, #bar{
width: 50px; /* use any width or height */
height: 50px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">
...如果你想设置或更改图像（以#foo为例）：
jQuery的：
$("#foo").css("background-image", "url('path/to/image.png')");
JavaScript的：
document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
答案 15 :(得分：1)
更新2019。
您现在可以使用接受以下值的object-fit css属性：fill | contain | cover | none | scale-down
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
例如，您可能有一个容纳图像的容器。
<div class="container">
<img src="" class="container_img" />
</div>
.container {
height: 50px;
width: 50%;
.container_img {
height: 100%;
width: 100%;
object-fit: cover;
答案 16 :(得分：1)
此处找到的许多解决方案都有一定的局限性：有些不能在IE（适合对象）或较旧的浏览器中运行，其他解决方案不能按比例放大图像（仅缩小图像），许多解决方案不支持调整窗口大小并且许多不是通用的，要么期望修复分辨率或布局（纵向或横向）
如果使用javascript和jquery没问题，那么我有基于@Tatu Ulmanen代码的此解决方案。我修复了一些问题，并添加了一些代码，以防图像被动态加载并且开始时不可用。基本上，这个想法是有两个不同的css规则并在需要时应用它们：一个是当限制为高度时，因此我们需要在侧面显示黑条，而当其他规则是宽度时，则要使用css规则，因此我们需要在顶部/底部显示黑条。
function applyResizeCSS(){
var $i = $('img#imageToResize');
var $c = $i.parent();
var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();
if(i_ar > c_ar){
$i.css( "width","100%");
$i.css( "height","auto");
}else{
$i.css( "height","100%");
$i.css( "width","auto");
}
}
var Oriwidth,Oriheight;
$(function() {
$(window).resize(function() {
applyResizeCSS();
});
$("#slide").load(function(){
Oriwidth = this.width,
Oriheight = this.height;
applyResizeCSS();
});
$(window).resize();
});
对于HTML元素，例如：
<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>
答案 17 :(得分：0)
我有类似的问题。我用 just CSS 解决了它。
基本上，Object-fit: cover可帮助您完成在div内放置图像时保持纵横比的任务。
但是问题是Object-fit: cover在IE中不起作用，并且占用了100％的宽度和100％的高度，并且宽高比失真了。换句话说，我没有在镀铬中看到的图像缩放效果。
我采取的方法是使用绝对将图像放置在容器内，然后使用以下组合将其放置在中间位置：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
一旦它居中，我就给图片
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使图像获得Object-fit：cover的效果。
https://jsfiddle.net/furqan_694/s3xLe1gp/
此逻辑适用于所有浏览器。
答案 18 :(得分：0)
试试这个
HTML：
<div class="container"></div>
CSS：
.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}