The resize image property is used in responsive web where image is resizing automatically to fit the div container. The max-width property in CSS is used to create resize image property. The resize property will not work if width and height of image defined in the HTML.
Syntax:
img { max-width:100%; height:auto; }
Width can also be used instead of max-width if desired. The key is to use height:auto to override any height=”…” attribute already present on the image.
The CSS properties max-width and max-height work great, but aren’t supported many browsers.
Example 1:
<!DOCTYPE html> < html > < head > < title >cell padding</ title > < style > .gfg { width:auto; text-align:center; padding:20px; } img { max-width:100%; height:auto; } </ style > </ head > < body > < div class = "gfg" > < p id = "my-image" >< img src = </ p > </ div > </ body > </ html > |
Output:
A common use is to set max-width: 100%; height: auto; so large images don’t exceed their containers width. Another way is the use of object-fit property, this will fit image, without changing the proportionally.
Example 2:
<!DOCTYPE html> < html > < head > < title >cell padding</ title > < style > .gfg { width:auto; text-align:center; padding:20px; } img { width: 100%; height: 100%; object-fit: contain; } </ style > </ head > < body > < div class = "gfg" > < p id = "my-image" >< img src = </ p > </ div > </ body > </ html > |
Output:
leave a comment
0 Comments