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
![Bootstrap UI Design Templates](/lib/images/bootstrap-code-snippets.png)
![Property Marvels - A Leading Real Estate Portal for Premium Properties](/lib/images/propertymarvels.png)
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 Editor Copyright © 2024 Tutorial Republic. All Rights Reserved. Share This:
Từ khóa » Html Scale Image To Page Width
-
How To Resize An Image To Fit In The Browser Window? - Stack Overflow
-
How To Resize An Image In HTML?
-
Responsive Web Design Images - W3Schools
-
CSS Object-fit Property - W3Schools
-
How To Resize Images In HTML
-
HTML Tag: Change The Width Of A Picture In HTML »
-
How To Resize An Image With HTML - Computer Hope
-
Making Responsive Images With CSS Properties - BitDegree
-
Setting Height And Width On Images Is Important Again
-
How To Resize Images Using CSS For Responsive Web Design
-
How To Change Image Size In CSS - Javatpoint
-
Resize Image Proportionally With CSS - GeeksforGeeks
-
Resize Images Proportionally While Keeping The Aspect Ratio
-
Can I Change The Size Of An Image? - Codecademy