How Do I Auto-resize An Image To Fit A 'div' Container? - Intellipaat

Login Remember

• Register

All Courses Ask a Question

• Questions
• Unanswered
• Ask a Question
• Blog
• Tutorials
• Interview Questions

Back

Login Explore Courses Blog Tutorials Interview Questions

• community
• Web Technology
• How do I auto-resize an image to fit a 'div'...

How do I auto-resize an image to fit a 'div' container? How do I auto-resize an image to fit a 'div' container? 0 votes 2 views asked Aug 14, 2019 in Web Technology by Sammy (47.6k points)

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?

• css
• html
• image

Please log in to add a comment. Please log in to answer this question.

1 Answer

0 votes answered Aug 14, 2019 by Vishal (106k points)

To auto-resize an image to fit a 'div' container you can use the below-mentioned piece of code:-

max-width:100%;

max-height:100%;

If you want to specify a width only do height: auto;.

See the example below:-

img {

max-width: 100%;

max-height: 100%;

}

.portrait {

height: 80px;

width: 30px;

}

.landscape {

height: 30px;

width: 80px;

}

.square {

height: 75px;

width: 75px;

}

Please log in to add a comment.

Related questions

0 votes 1 answer Image inside div has extra space below the image asked Aug 28, 2019 in Web Technology by Tech4ever (20.3k points)

• html
• css
• image

0 votes 1 answer CSS Display an Image Resized and Cropped asked Sep 4, 2019 in Web Technology by Tech4ever (20.3k points)

• html
• css
• background-image
• image

0 votes 1 answer Responsive image align center bootstrap 3 asked Aug 29, 2019 in Web Technology by Tech4ever (20.3k points)

• html
• css
• image
• twitter-bootstrap
• alignment

0 votes 1 answer Fit background image to div asked Sep 6, 2019 in Web Technology by Tech4ever (20.3k points)

• html
• css
• background-image

0 votes 1 answer How do I get a div to float to the bottom of its container? asked Sep 9, 2019 in Web Technology by Tech4ever (20.3k points)

• html
• css

31k questions

32.8k answers

501 comments

693 users

• All categories
• Python (3.4k)
• Java (2.2k)
• SQL (1.6k)
• Linux (373)
• Big Data Hadoop & Spark (1.3k)
• Data Science (3.3k)
• R Programming (867)
• C Programming (35)
• DevOps and Agile (2.9k)
• Docker (61)
• AI and Deep Learning (1.4k)
• Machine Learning (1.2k)
• AWS (2.5k)
• Azure (1.6k)
• GCP (226)
• RPA (616)
• Selenium (212)
• Software Testing (59)
• Blockchain (436)
• Salesforce (823)
• Others (585)
• BI (1.9k)
• IoT (24)
• Web Technology (1.5k)
• Cyber Security (359)
• Digital Marketing (331)
• Technology Trends (121)
• SEO (105)
• Informatica (22)
• UI UX (153)
• Electric Vehicle (24)
• Investment Banking (56)
• Supply Chain Management (30)

Browse Categories

• Master Program
• Big Data
• Data Science
• Business Intelligence
• Salesforce
• Cloud Computing Courses
• Digital Marketing
• Database
• Programming
• Testing
• Project Management
• Web Development Courses

© COPYRIGHT 2011-2024 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

...