my gallery image in apple's chrome not showing correctly. images stretch in apple mobile. I used in HTML:
<div class="d-flex flex-md-column justify-content-center flex-wrap">
<img src="images/listings/yyVxA_1609070447.webp">
</div>
and Css:
max-width: 100%;height: auto;
CSS:
.image {
width: 100%;
height: auto;
}
HTML:
<div class="d-flex flex-md-column justify-content-center flex-wrap image"> <!-- added the image class -->
<img src="images/listings/yyVxA_1609070447.webp" width="400px" height="200px"> <!-- default width + height -->
</div>
Furthermore, if you want to be more specific, use the @media query in CSS - like so:
@media only screen and (min-width: 600px) {
.image {
width: 200px;
height: 100px;
}
}
This will change the class when the the width of a user's screen is 600px. Though you normally don't need to do this with images if they have the width of 100% and auto height. You may want to read how to make an image responsive.