我有一個定義的寬度和高度的div。然後我有一張我想要的照片(保持比例)。這樣的JsFiddle:使img響應,並填入分區
<div style="width: 200px; height: 300px; background: red;">
<img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: 100%; max-height: 100%" />
</div>
現在我想纏繞在IMG(即恰好ajusted到IMG寬度和高度和位置),因爲那時希望有在div裏面的一些元素與position:absolute
相對於一個div img。檢查JsFiddle:
<div style="width: 200px; height: 300px; background: red;">
<div style="display: inline-block; max-width: 100%; max-height: 100%; background: blue;">
<img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: inherit; max-height: inherit" />
</div>
</div>
的結果是錯誤的,導致IMG被覆蓋在DIV。我希望img像第一個例子那樣調整大小。
在Child with max-height: 100% overflows parent他們指出div需要有高度和寬度,但div不會填滿整個img。
實際上有一種方法可以做到嗎?
我的整個佈局更復雜,完全響應Flex上的和這裏的例子只是一個近似值集中在我有問題。因此,任何固定高度和寬度的解決方案都是錯誤的。
當然,我不希望圖像被剪切。我想把它作爲第一個例子 –
@DidacMontero更新了我的答案:-) – bookcasey
是的,你是對的,結果和他第一個例子一樣。但我需要一個div圍繞IMG填充完全相同的區域作爲IMG的原因,當我將絕對位置添加到div的孩子,它應該是絕對相對IMG –