Menu
I want to show an image in small windows but i need to save on the ratio of the image(I still want that people can know what it is). For example lets say that the image is 1000X200 pixels, and there's a div that defined as: height: 100px; width: 100px; So I want that the image will wrote like that:
<img src="asd.jpg" height=20 width=100 /> and not
<img src="asd.jpg" height=100 width=100 /> or not
<img src="asd.jpg"/> and then there's scrolls..
I can work with percentages, but how do I do it.. (and does it even work with percentages alone?)
558
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
To resize an image in HTML, use the width and height attributes of the img tag. You can also use various CSS properties to resize images.
We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.
If you set max-height and max-width in CSS, modern browsers will restrict it to that size but keep the aspect ratio correct:
<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" /> If your parent div has a set width and height, you could set the max-width and max-height of the img to 100%:
div { width: 100px; height: 100px; } div > img { max-width: 100%; max-height: 100%; } (It's always a good practice to give images max-width of 100%, for mobile browsers etc.)
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
