How to style image inside parent div without stretched

HTML & CSS
1

I have a structure like this:


<div id="parent">
	<img src="image1.png" />
	CONTENT CONTENT CONTENT
	<div id="child">
		<img src="image2.png" />
	</div>
</div>

And I had styled them like:


#parent {
	width: 100%;
	overflow: hidden;
}
#parent img {
	width: 640px;
	display: block;
}

#child {
	width: 80px;
	display: block;
}
#child img {
	width: 100%;
}

How do I display an image inside a child div without stretched to full width.

Thank you,

2

If you want the IMG in the child div to be 640px just get rid of :

#child img {
	width: 100%;
}

other wise change #parent img to #parent>img also that way on the IMG inside #parent will be 640px and the image inside #child will be the natural dimension of that image.

hope that helps.

3

Thank you,

Seems it’s been working fine in a presumption environment but not working in my project environment.

What’s the different between #parent img and #parent > img

4

#parent img targets all img descendants of the parent.

#parent > img targets only the immediate img descendants of the parent.