How To Auto-resize An Image To Fit Into A DIV Container Using CSS
Có thể bạn quan tâm
Topic: HTML / CSSPrev|Next
Answer: Use the CSS max-width Property
You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Additionally, you can also apply the max-height property if you've a fixed height div element, so that the image doesn't overflow from the div's boundary horizontally or vertically.
Example
Try this code » <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Resize Image Proportionally with CSS</title> <style> img{ max-width: 100%; max-height: 100%; display: block; /* remove extra space below image */ } .box{ width: 250px; border: 5px solid black; } .box.large{ height: 300px; } .box.small{ height: 100px; } </style> </head> <body> <h2>Image inside Auto-height Div</h2> <div class="box"> <img src="images/sky.jpg" alt="Cloudy Sky"> </div> <br> <h2>Image inside Portrait Div</h2> <div class="box large"> <img src="images/sky.jpg" alt="Cloudy Sky"> </div> <br> <h2>Image inside Landscape Div</h2> <div class="box small"> <img src="images/sky.jpg" alt="Cloudy Sky"> </div> </body> </html>Related FAQ
Here are some more FAQ related to this topic:
- How to remove white space underneath an image using CSS
- How to add border to an element on mouse hover without affecting the layout in CSS
- How to transform image size on mouse hover without affecting the layout in CSS
Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.
About Us
Our Story Terms of Use Privacy PolicyContact
Contact Us Report Error AdvertiseInteractive Tools
Bootstrap Icon Search Utility HTML Formatter Title & Meta Length Calculator HTML Color Picker Bootstrap Button Generator SQL Playground Font Awesome Icon Finder HTML EditorCopyright © 2024 Tutorial Republic. All Rights Reserved. Share This:
Từ khóa » Html Scale Image To Fit Screen
-
How To Resize An Image To Fit In The Browser Window? - Stack Overflow
-
CSS Object-fit Property - W3Schools
-
Responsive Web Design Images - W3Schools
-
How To Resize An Image In HTML?
-
Making Responsive Images With CSS Properties - BitDegree
-
How To Resize Images Using CSS For Responsive Web Design
-
How To Make An Image Fit To Screen In Html Code Example
-
Html Background Image Fit Or Scale To Screen Size Code Example
-
How To Resize Images In HTML
-
How To Auto-resize An Image To Fit A Div Container Using CSS?
-
Resize Image Proportionally With CSS - GeeksforGeeks
-
How To Auto-Resize The Image To Fit An HTML Container - W3docs
-
Resize Images Proportionally While Keeping The Aspect Ratio
-
Responsive Images - Learn Web Development | MDN