这对于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()事件，当用户调整窗口大小时，图像将会调整。

这并没有试图在容器中居中图像，这是可能的，但我猜这不是你想要的。

2016年更新:

现代浏览器的表现要好得多。你所需要做的就是将图像宽度设置为100% (演示)

.container img {
width: 100%;
}

由于您不知道纵横比，因此必须使用一些脚本。下面是我如何用jQuery (演示)做到这一点:

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

超文本标记语言

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

这不是一个完美的解决方案，但这个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%;
}

使用这种方法，你可以在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;
}

如果你使用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吗? 由于< / p >

设置外部container div的宽度和高度。然后在img上使用下面的样式:

.container img{
width:100%;
height:auto;
max-height:100%;
}

这将帮助您保持您的img

有一个更简单的方法，只使用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大小而不失真。

如果可以，使用背景图像并设置background-size: cover。这将使背景覆盖整个元素。

CSS

div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}

如果你坚持使用内联图像，有几个选项。首先，有

object-fit

此属性作用于图像、视频和其他类似background-size: cover的对象。

CSS

img {
object-fit: cover;
}

遗憾的是，浏览器支持并不是那么好，直到IE版本11都不支持它。下一个选项使用jQuery

CSS + jQuery

超文本标记语言

<div>
<img src="image.png" class="cover-image">
</div>

CSS

div {
height: 8em;
width: 15em;
}

自定义jQuery插件

(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%);
}

希望这对大家有所帮助，编码愉快!

你可以在父div上使用object-fit: cover;。

https://css-tricks.com/almanac/properties/o/object-fit/

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');">

JSFiddle

.．.如果你想设置或改变图像(以#foo为例):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

感谢CSS3

img
{
object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

我在寻找一个类似的问题时遇到了这个问题。我正在制作一个响应式设计的网页，页面上放置的元素的宽度设置为屏幕宽度的百分比。高度用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=""，可以让PHP动态更新我的页面，css样式和style=""将最终在一个完美覆盖的图像中结束，缩放以覆盖动态div标签。

这招对我很管用

div img {
width: 100%;
min-height: 500px;
width: 100vw;
height: 100vh;
object-fit: cover;
}

要使此图像拉伸到最大可能的大小而不溢出，它是或倾斜图像。

应用……

img {
object-fit: cover;
height: -webkit-fill-available;
}

图像的样式。

如果你想设置一个最大宽度或高度(这样它就不会很大)，同时保持图像的纵横比，你可以这样做:

img{
object-fit: contain;
max-height: 70px;
}

这里发现的许多解决方案都有一些限制:一些不能在IE(对象适合)或旧浏览器中工作，其他解决方案不能缩放图像(只缩小它)，许多解决方案不支持调整窗口大小，许多不是通用的，要么期望固定分辨率或布局(纵向或横向)

如果使用javascript和jquery不是一个问题，我有这个解决方案基于@Tatu Ulmanen的代码。我修复了一些问题，并添加了一些代码，以防图像是动态加载的，在开始时不可用。基本上，这个想法是有两个不同的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"/>

我也有类似的问题。我用只是CSS解决了它。

基本上，Object-fit: cover帮助你实现在div中定位图像时保持纵横比的任务。

但问题是Object-fit: cover不能在IE中工作，它是100%的宽度和100%的高度和纵横比是扭曲的。换句话说，我在chrome浏览器中看到的图像缩放效果没有了。

我采用的方法是将图像放置在容器中，使用绝对，然后使用组合把它放在正中间:

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

这使得图像得到对象适合:覆盖的效果。

下面是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

这种逻辑适用于所有浏览器。

2019年更新。

你现在可以使用object-fit css属性，它接受以下值

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

试试这个

HTML:

<div class="container"></div>

CSS:

.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}