HTML/CSS图像调整大小比例

问题描述：

我想链接的图像具有原始比例的大小800x600。链接的图像可以有1000x400或者600x1000。HTML/CSS图像调整大小比例

这时我WIDTH = 800像素，并在类的div溢出调整图像隐藏

<div class="cut"> 
<img src="www.example.de/image" width=800px> 
</div>

这工作时，图像比例是像600x1000，但是当它是1000x400没有。它如何处理每个图像大小？

你想不改变比例？这是不可能的。 – Oriol 2015-02-09 16:01:33

提示：'800px'只能在CSS中使用，在'width =“...”'html属性中使用'px'或者使用CSS：'.cut img {width：800px; }' – 2015-02-09 16:01:52

我在这里测试过它，它的工作原理就像你期待的那样。你的CSS可能有其他问题。 – TimV 2015-02-09 16:07:41

答

如果您想要更简单的解决方案，请将图像更改为背景。

像这样： http://jsfiddle.net/yp7jq0tf/

.image{ 
    float:left; 
    width:800px; 
    height:600px; 
    border:1px red solid; 
    background:no-repeat center center; 
    background-size:100%; 
}

HTML部分：

<div class="image" style="background-image:url(  
    http://www.google.com/images/srpr/logo11w.png 
);"></div>

答

我相信这是你在找什么：

.image{ 
    width:800px; 
    height:600px; 
    background:no-repeat center center; 
    background-size: cover; 
}

您需要裁剪图像不知何故，所以把它们放在背景中是最有意义的。

http://jsfiddle.net/x07jbku2/

HTML/CSS图像调整大小比例

相关推荐