Ad
How Does One Resize An Image Thats Larger That The Div Container To Fit Perfectly In It(auto Resize, Zoom Out Etc...)
This is the code i have and im using it on a shopify store.
<div style="width:100%; height:404px;">
<img style='height: 100%; width: 100%; object-fit: contain; background-image: url(https://cdn.shopify.com/s/files/1/2233/7153/files/Grade_photo_shoot__0056.jpg?13831580932505769974);' />
</div>Here is what it looks like:
and this is the original image:
Ad
Answer
Check this code:
#myCanvas {
border: 1px solid red;
}
.image {
background-image: url('https://cdn.shopify.com/s/files/1/2233/7153/files/Grade_photo_shoot__0056.jpg?13831580932505769974');
width: 100%;
height: 100%;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
}<div style="width:100%; height:404px;">
<div class="image">
</div>
</div>Ad
source: stackoverflow.com
Related Questions
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Undefined Result for Variable with Javascript innerHTML function
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM
- → How to add a timer in HTML5 and Javascript?
Ad