Question

I'm using markdown language to add posts to the site. So, in order to add image to my post I write

![Alt text](/path/to/img.jpg) 

and img appears on the page. There's one problem though - images stretch its parent div if original width of the image exceeds container's width. I use fixed layout so width of container element is hardcoded in css. The Question is: is it even possible to prevent images from stretch my div but instead resize automatically to fit nicely into it?

Was it helpful?

Solution

is it even possible to prevent images from stretch my div but instead resize automatically to fit nicely into it?

Yes! Try setting:

img { max-width: 100%; }

As long as the <img>'s container has an explicit width, the image shouldn't exceed that width.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top