How To Resize An Image To Fit An HTML Container | Codetain

Trang chủ » Html Scale Image To Fit Container » How To Resize An Image To Fit An HTML Container | Codetain

Có thể bạn quan tâm

Return to blogHow to resize an image to fit an HTML container
  • Development

4/27/2020

hero image for How to resize an image to fit an HTML containerAvatar image of Artur WoźniakArtur Woźniak

Frontend Developer

Do you need help from our developers?

Contact us

In this article, I would like to present how to resize an image to fit a HTML container.

The most popular approach is to add object-fit property to img tag, we will use it as well, plus we will add other CSS properties.

To get things done we will use this CSS selectors and properties.

.project { display: flex; margin: 50px0; } .project__image { flex: 1; } .project__image--relative { position: relative; } .project__image--background-img { background: url('https://images.pexels.com/photos/4015752/pexels-photo-4015752.jpeg?cs=srgb&dl=drewno-wakacje-ludzie-sztuka-4015752.jpg&fm=jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; } .project__imageimg { width: 100%; height: 400px; object-fit: cover; object-position: center; } .project__image--relativeimg { position: absolute; height: 100%; } .project__description { flex: 1; margin: 0; padding: 20px; align-self: center; }

In the following examples, we will change HTMLand CSS structure to achieve our goal.

Example 1 - background image

<div class="project"> <divclass="project__imageproject__image--background-img"></div> <pclass="project__description"> ImagedescriptionReceivedthelikewiselawgracefulhis. Normightsetalongcharmnowequalgreen. Pleasedyetequallycorrectcolonelnotone. Sayanxiouscarriedcompactconductsexgeneralnaycertain. Mrsforrecommendexquisitehouseholdeagernesspreservednow. Myimprovedhonouredheamecstaticquittinggreatestformerly. Examineshebrotherprudentadddayham. Farstairsnowcomingbedopposehuntedbecomehis. Youzealouslydeparturehadprocuringsuspicion. Bookswhosefrontwouldpurseifbedodecay. Quittingyouwayformerlydisposedperceiveladyshipare. Commonturnedboydirectandyet. </p> </div>

As you can see we have no img tag in this example. We use background image with background-size: cover toresize the background image and make sure the image is fully visible.

Example 2 - nested img element and object-fit: cover property

<div class="project"> <divclass="project__image"> <imgsrc="https://images.pexels.com/photos/4015752/pexels-photo-4015752.jpeg?cs=srgb&dl=drewno-wakacje-ludzie-sztuka-4015752.jpg&fm=jpg" alt="exampleimage"> </div> <pclass="project__description"> ImagedescriptionReceivedthelikewiselawgracefulhis. Normightsetalongcharmnowequalgreen. Pleasedyetequallycorrectcolonelnotone. Sayanxiouscarriedcompactconductsexgeneralnaycertain. Mrsforrecommendexquisitehouseholdeagernesspreservednow. Myimprovedhonouredheamecstaticquittinggreatestformerly. Examineshebrotherprudentadddayham. Farstairsnowcomingbedopposehuntedbecomehis. Youzealouslydeparturehadprocuringsuspicion. Bookswhosefrontwouldpurseifbedodecay. Quittingyouwayformerlydisposedperceiveladyshipare. Commonturnedboydirectandyet. </p> </div>

In this example Img tag is child of div with class project__image, it gets CSS properties from project__image img class.

Example 3 - nested img with position absolute

<div class="project"> <divclass="project__imageproject__image--relative"> <imgsrc="https://images.pexels.com/photos/4015752/pexels-photo-4015752.jpeg?cs=srgb&dl=drewno-wakacje-ludzie-sztuka-4015752.jpg&fm=jpg" alt="exampleimage"> </div> <pclass="project__description"> ImagedescriptionReceivedthelikewiselawgracefulhis. Normightsetalongcharmnowequalgreen. Pleasedyetequallycorrectcolonelnotone. Sayanxiouscarriedcompactconductsexgeneralnaycertain. Mrsforrecommendexquisitehouseholdeagernesspreservednow. Myimprovedhonouredheamecstaticquittinggreatestformerly. Examineshebrotherprudentadddayham. Farstairsnowcomingbedopposehuntedbecomehis. Youzealouslydeparturehadprocuringsuspicion. Bookswhosefrontwouldpurseifbedodecay. Quittingyouwayformerlydisposedperceiveladyshipare. Commonturnedboydirectandyet. </p> </div>

In the above example we changed CSS class for img container. Now our img is a child of div with class project__image project__image--relative. It will consume the values from project__image img and project__image—relative img where we add position absolute and we override height to be 100% to stretch img to cover the whole container.

Now, I know the above examples are very simple, but I just wanted to highlight possible solutions to resize an image to fit an HTML Container.

However, I hope you could learn something new thanks to this article.

Helpful resources:

  • Object-fit: cover: https://www.w3schools.com/css/css3_object-fit.asp
  • RWD - images: https://www.w3schools.com/css/css_rwd_images.asp
  • Resize to fit: https://www.w3docs.com/snippets/css/how-to-auto-resize-an-image-to-fit-an-html-container.html

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