4
votes

Flex images dans iOS, rendre les images même largeur

Comment puis-je y parvenir sous iOS? Dans Firefox, cela fonctionne mais ne trouve pas de solution pour 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>

Voici à quoi cela ressemble dans Firefox Comment pouvez-vous faire cela dans iOS?

Voici comment il est réactif dans Firefox, je voudrais réaliser la même chose avec iOS.

html css flexbox safari

3 commentaires

comment ça se voit sur iOS?

Les images sont affichées dans toute leur largeur, trop large de cette manière.

Avez-vous essayé display: -webkit-box; ou display: -webkit-flex; ?

3 Réponses :

0
votes

a ajouté flex-wrap: wrap; cela amènera des images sur la ligne suivante si cela ne rentre pas dans le div . J'espère que cela t'aides. merci

<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>

#products {
    display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
#products img {
    width: auto !important;
    height: auto !important;
}

6 commentaires

Ce n'est pas le résultat souhaité, il faut toutes les images sur 1 ligne, uniformément placées.

ajouter l'image largeur dans % . et indiquez div largeur externe: 100%

cela donne à chaque image la même largeur et déforme les proportions. Il semble qu'iOS ou Safari ne prend pas en charge la largeur automatique?

@drooh vous voulez une taille différente pour chaque image ??

Oui, dans Firefox et Chrome, cela fonctionne de cette façon. Il garde la proportion d'image

mais vous avez donné width et height pour chaque image en px .. essayez maintenant de les donner en % via css et div externe width : 100%

1
votes

J'ai trouvé une solution de travail - si cela ne vous dérange pas de changer un peu le balisage, alors je suggérerais d'envelopper chaque image dans un autre div, de définir sa largeur min: 0 et d'avoir les images prenez le plein avec de celui contenant 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>

Cette solution fonctionne et a été testée sur Firefox, Chrome (Desktop sur Linux) et iOS Safari version 11 (vérifié sur la pile de navigation).

4 commentaires

Testez-vous Firefox et Chrome sur un ordinateur ou un appareil mobile (ex: iPad ou iPhone)?

J'ai testé sur Desktop Chrome et Desktop Firefox (tous deux sous Linux) ainsi que sur Safari mobile ou iOS version 11 sur Browserstack.

D'accord. Avez-vous essayé de définir la largeur de l'appareil dans une balise Meta?

Je ne pense pas que cela était nécessaire, car cela fonctionne bien à la fois sur codepen et dans le moteur d'extraits de stackoverflow, et aucun d'eux ne définit cette balise meta. Cela ne devrait avoir aucun effet de toute façon.

2
votes

Approche 1: assurez-vous de définir les dimensions intrinsèques (taille naturelle) des images dans le balisage, afin de conserver les proportions.

<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>

#products {
  display: flex;
}

#products img {
  width: 100%;
  height: auto;
}

Approche 2: Ajoutez un wrapper à chaque image, les dimensions sont facultatives.

<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>

#products {
  display: flex;
}

#products img {
  min-width: 0;
  max-width: 100%;
  height: 100%;
}

0 commentaires