J'expérimente avec les CSS shape-outside en utilisant une image, mais au moins dans Safari, la forme résultante est toujours basée sur la taille de l'image originale et je ne vois aucun moyen de mettre à l'échelle l'image en fonction de la taille de la boîte, ce qui serait nécessaire pour un design vraiment réactif (sans parler de faciliter la vie pour les tests initiaux).
Par exemple, dans cet extrait de CSS :
#shapetest {
float: left;
width: 100px;
height: 300px;
background: url('some-image.png');
shape-outside: url('some-image.png');
background-size: contain;
}tandis que l'arrière-plan est mis à l'échelle pour couvrir la div, la forme reste à la taille d'origine de some-image.png ce qui n'est pas inattendu. Cependant, j'aimerais vraiment pouvoir redimensionner la forme pour qu'elle tienne dans la boîte, sans avoir à générer plusieurs rendus de la forme.
Est-ce qu'il me manque une sorte de fonction de mise à l'échelle pour les shape-outside ? Les ressources que j'ai pu trouver à ce sujet indiquent que le facteur d'échelle pour un shape-outside n'est pas encore spécifiée, ce qui la rend un peu moins utile pour les conceptions où l'objet peut être mis à l'échelle en fonction de la taille relative du point de vue, par exemple.
EDIT : En particulier, je souhaite pouvoir spécifier le hauteur de l'image (et que la largeur réagisse en conséquence). La réponse initiale à cette question fonctionnait bien avec une largeur spécifiée, mais la tentative suivante de reproduction ne fonctionne pas, car la hauteur spécifiée de l'image div fait couler le texte vers le bas, et en plaçant le div a float:left fait en sorte que sa propre boîte remplace la forme dans le flux :
div.inset {
height: 1.5in;
}
div.inset img {
float: left;
width: auto;
height: 100%;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.En revanche, l'utilisation d'une largeur spécifiée et d'une hauteur calculée fonctionne parfaitement :
div.inset {
width: 1.5in;
}
div.inset img {
float: left;
width: 100%;
height: auto;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
