如何在父块的全宽上制作图像？

Question

我有div块内有img。我试图让在父母的整个宽度IMG：

<div><img></div> 

CSS

img { 
    display: block; 
    margin:0px 
    position: relative 
} 

div { 
    overflow: hidden 
} 

Answer 1

块元素需要父容器的整个宽度，只是你的容器没有宽度..和你必须指定图像的最大宽度，因为它会溢出容器，如果它是更大的

像这样：

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

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg"/> 
 
</div>

Answer 2

img { 
    max-width: 100%; 
    position: relative; // fix for old IE browsers and some blackberry browsers like UC Browser. 
    box-sizing: border-box; // fix for old operamini browsers and Get as Google preview 
}