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 Background Image Stretch To Fit Div
-
How To Stretch The Background Image To Fill A Div - Stack Overflow
-
How To Stretch A Background Image To Fit A Web Page - ThoughtCo
-
CSS Background-size Property - W3Schools
-
Resizing Background Images With Background-size - CSS
-
Perfect Full Page Background Image - CSS-Tricks
-
Background-size - CSS-Tricks
-
How To Stretch And Scale An Image In The Background With CSS
-
How To Stretch A Background Image In CSS
-
Background Image Fit To Div Code Example - Code Grepper
-
How To Auto-resize An Image To Fit A Div Container Using CSS?
-
Css Background Image Size To Fit Div - Add Multiple ... - Pakainfo
-
How To Resize An Image In HTML?
-
Fit Image To Div Without Stretching | CSS Background-size Property
-
How To Set Size Of Background Image Fit To The Div