How To Auto-resize An Image To Fit Into A DIV Container Using CSS

Trang chủ » Html Scale Image To Fit Container » How To Auto-resize An Image To Fit Into A DIV Container Using CSS

Có thể bạn quan tâm

TutorialRepublic HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP5 v4.6 PHP7 SQL REFERENCES EXAMPLES FAQ SNIPPETS Online HTML Editor WEB TUTORIALS HTML Tutorial CSS Tutorial JavaScript Tutorial jQuery Tutorial Bootstrap Tutorial PHP Tutorial SQL Tutorial PRACTICE EXAMPLES HTML Examples CSS Examples JavaScript Examples jQuery Examples Bootstrap Examples PHP Examples HTML REFERENCES HTML Tags/Elements HTML Global Attributes HTML Event Attributes HTML Color Picker HTML Language Codes HTML Character Entities HTTP Status Codes CSS REFERENCES CSS At-rules CSS Properties CSS Animatable Properties CSS Color Values CSS Color Names CSS Web Safe Fonts CSS Aural Properties PHP REFERENCES PHP Array Functions PHP String Functions PHP File System Functions PHP Date/Time Functions PHP Calendar Functions PHP MySQLi Functions PHP Filters PHP Error Levels How to Auto-resize an Image to Fit into a DIV Container using CSS

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
Previous Page Next Page Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties

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 Policy

Contact

Contact Us Report Error Advertise

Interactive 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

TutorialRepublic

BMC Copyright © 2024 Tutorial Republic. All Rights Reserved. Share This:

Từ khóa » Html Scale Image To Fit Container