Je souhaite qu'une section de mon site (bannière) soit une image adaptée à toutes les largeurs et que l'image conserve toute sa largeur (pas la largeur px, mais en pourcentage) en tout temps. Je ne me soucie pas de la hauteur étant trop bas, j'ai besoin de l'image pour toujours montrer tout le contenu de la largeur et la hauteur pour être auto. J'utilise background-size: contain et cela conserve toute la largeur de l'image, mais la hauteur doit être calculée, car alors la hauteur du conteneur sera supérieure à celle de l'image. J'ai essayé d'utiliser des unités de fenêtre, mais ce n'est pas cohérent entre différentes résolutions (peut-être que je le fais mal, mais la valeur pour une résolution plus élevée ne fonctionne pas pour une résolution inférieure).CSS: auto calc hauteur de l'élément correspondant à l'image d'arrière-plan
Comment est-ce que je rendrais ceci sensible?
Le balisage:
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
J'utilise CSS pour cette image parce que, comme nous (devons) savoir, des images de conception ne font pas partie dans le balisage. Donc, l'image doit s'adapter à toute la largeur, quelle serait la différence entre 100% et 100vw? Le premier est la largeur du parent, le corps a toute la largeur dans l'écran et le second est la (encore?) La largeur de l'appareil?
Cette approche sera-t-elle compatible avec les tablettes et les téléphones? Devrais-je utiliser une seconde image optimisée pour ces cas?