CSS最大寬度不給比例調整大小

我有一個狹窄的看法，我插入一些HTML到。在每過一段時間有一個形象太寬，所以我一直在包裝原始的HTML字符串，用這個CSS來控制住：CSS最大寬度不給比例調整大小

<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style> 
<div style=\"word-wrap:break-word\"> 
. 
. ...original HTML inside the div wrapper... 
. 
</div>

但它不適合的寬度和高度圖像成比例，所以結果是非常扭曲的圖像。還有什麼我可以做的，最好用CSS或其他一樣簡單的東西？

這是嵌入在iOS應用程序的webview中。我不想通過原始HTML解析並查找圖像。我需要一個簡單的解決方案，它利用本機UIView類支持的方法。

UPDATE：

使用從凱爾下面的答案的例子，我認爲這個問題是與已嵌入的寬度和高度的圖像出現屬性：

凱爾的例子：

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">

已修改，將寬度和高度添加到第一個圖像鏈接

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">

兩個使用這個CSS：

div {width:100px;} 
p{max-width:100%;} 
img{max-width:100%;}

這真的是賺不到容器width屬性是否設置或沒有任何區別。我嘗試了兩種方法。

事實上，在this case (link)中看起來圖像首先被寬度和高度屬性放大，隨後寬度被CSS最大寬度縮小。這導致了一個非常奇怪的影響。

來源

2011-10-16 Jim

這很容易，只需向父級添加一個寬度即可。

div 
{ 
    width: 100px; 
}

Demo here。

來源

2011-10-16 07:43:41 Kyle

謝謝，凱爾。這看起來很有希望，但是在我嘗試過之後，我發現它不起作用。我在關於我發現的問題上添加了更多細節。 – Jim

我不知道如果我理解正確你的問題，但這裏是一個想法：

http://jsfiddle.net/FyC6r/4/

.mydiv 
{ 
    width:200px; 
    height:150px; 
    border: 1px solid red; 
} 

.mydiv img 
{ 
    width:100%; 
} 

<div class="mydiv"> 
    <img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div>

這樣你就必須按比例調整A圖像dependson你需要首先，什麼寬度或高度..只留下寬度在CSS中的100％，這意味着圖像將被調整大小以適應div的寬度和高度將被調整大小相同的時間作爲寬度，所以規模將得到尊重。

好..如果想讓它們根據寬度和高度來調整大小，那麼由於不同的比例會導致圖像失真。你可以使用img風格的寬度和高度來改變它們並且適合一個圖像，但是當另一個圖像被添加不同尺寸時，你會再次得到一個錯誤的顯示圖像。我會去的寬度保持它調整，事業的高度，總有屏幕下方空間:)

來源

2011-10-16 16:42:18 rmagnum2002

這是另一個http://jsfiddle.net/FyC6r/5/ – rmagnum2002

要保持正確的比例使用：

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

的height: auto修復的地步。

來源

2013-08-27 09:08:48 Richard

CSS最大寬度不給比例調整大小

回答

相關問題