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 Window
-
How To Resize An Image To Fit In The Browser Window? - Stack Overflow
-
How To Resize An Image In HTML?
-
CSS Object-fit Property - W3Schools
-
Responsive Web Design Images - W3Schools
-
Making Responsive Images With CSS Properties - BitDegree
-
How To Resize Images Using CSS For Responsive Web Design
-
How To Resize Images In HTML
-
Resizing Background Images With Background-size - CSS
-
Html Background Image Fit Or Scale To Screen Size Code Example
-
How To Auto-Resize The Image To Fit An HTML Container - W3docs
-
How To Auto-resize An Image To Fit A Div Container Using CSS?
-
Resize Images Proportionally While Keeping The Aspect Ratio
-
HTML How To Make Background Image Fit Screen - YouTube
-
Quick Tip: How To Automatically Resize An Image To Fit The Screen