Reputation: 678
How do I achieve this in iOS? In firefox it works but can not find a solution for iPad.
<style>
#products {
display: flex;
}
#products img {
width: auto !important;
height: auto !important;
}
</style>
<div id="products">
<img src="https://nomadweb.design/img/imac-frame-ilioslighting.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg" width="406" height="815" />
</div>
Here is how it looks in Firefox How can you do this in iOS?
Here is how it is responsive in firefox, would like to achieve the same with iOS.
Upvotes: 4
Views: 547
Reputation: 78676
Approach 1: Make sure to set intrinsic dimensions (natural size) of the images in the markup, in order to maintain the aspect ratios.
#products {
display: flex;
}
#products img {
min-width: 0;
max-width: 100%;
height: 100%;
}
<div id="products">
<img src="https://i.imgur.com/5fhlNOd.jpg" width="980" height="815">
<img src="https://i.imgur.com/SLZv3Yu.jpg" width="406" height="815">
<img src="https://i.imgur.com/eQ6LawW.jpg" width="980" height="815">
<img src="https://i.imgur.com/0W3B4ce.jpg" width="406" height="815">
<img src="https://i.imgur.com/7jGyI95.jpg" width="980" height="815">
<img src="https://i.imgur.com/oFhKzAZ.jpg" width="406" height="815">
</div>
Approach 2: Add a wrapper to each image, dimensions are optional.
#products {
display: flex;
}
#products img {
width: 100%;
height: auto;
}
<div id="products">
<div><img src="https://i.imgur.com/5fhlNOd.jpg"></div>
<div><img src="https://i.imgur.com/SLZv3Yu.jpg"></div>
<div><img src="https://i.imgur.com/eQ6LawW.jpg"></div>
<div><img src="https://i.imgur.com/0W3B4ce.jpg"></div>
<div><img src="https://i.imgur.com/7jGyI95.jpg"></div>
<div><img src="https://i.imgur.com/oFhKzAZ.jpg"></div>
</div>
Upvotes: 2
Reputation: 2115
I found a working solution - if you don't mind changing the markup a bit, then I would suggest wrapping each image in another div, set its min-width: 0
and have the images take the full with of that containing div:
<style>
#products {
display: flex;
}
#products img {
width: 100% !important;
height: auto !important;
}
.product {
min-width: 0;
}
</style>
<div id="products">
<div class="product"><img src="https://nomadweb.design/img/imac-frame-ilioslighting.jpg" width="980" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg" width="406" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg" width="980" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg" width="406" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg" width="980" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg" width="406" height="815" /></div>
</div>
This solution works and was tested on Firefox, Chrome (Desktop on Linux) and iOS Safari version 11 (checked on browserstack).
Upvotes: 1
Reputation: 2758
added flex-wrap: wrap;
this will bring images on next line if it doesn't fit in the div
. Hope this helps. thanks
#products {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
#products img {
width: auto !important;
height: auto !important;
}
<div id="products">
<img src="https://nomadweb.design/img/imac-frame-ilioslighting.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg" width="406" height="815" />
</div>
Upvotes: 0