HTML/CSS圖像調整大小比例

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

這時我WIDTH = 800像素，並在類的div溢出調整圖像隱藏

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

這工作時，圖像比例是像600x1000，但是當它是1000x400沒有。它如何處理每個圖像大小？

來源

2015-02-09 user3688653

你想不改變比例？這是不可能的。 – 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>

來源

2015-02-09 16:12:46

我相信這是你在找什麼：

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

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

http://jsfiddle.net/x07jbku2/

來源

2015-02-09 16:22:01

HTML/CSS圖像調整大小比例

回答

相關問題