Je travaille actuellement sur une page de destination mobile pour une entreprise. C'est une mise en page vraiment basique, mais sous l'en-tête, il y a une image d'un produit qui aura toujours une largeur de 100% (le design montre qu'il va toujours d'un bord à l'autre). En fonction de la largeur de l'écran, la hauteur de l'image s'ajustera évidemment en conséquence. Je l'ai fait à l'origine avec une img (avec une largeur CSS de 100%) et cela fonctionnait très bien, mais j'ai réalisé que j'aimerais utiliser des requêtes multimédias pour servir différentes images en fonction de différentes résolutions - disons un petit, moyen et une grande version de la même image, par exemple. Je sais que vous ne pouvez pas changer le src img avec CSS donc j'ai pensé que je devrais utiliser un arrière-plan CSS pour l'image par opposition à une balise img dans le HTML.
Je n'arrive pas à faire fonctionner cela correctement car le div avec l'image d'arrière-plan a besoin à la fois d'une largeur et d'une hauteur pour afficher l'arrière-plan. Je peux évidemment utiliser 'width: 100%' mais que dois-je utiliser pour la hauteur? Je peux mettre une hauteur fixe aléatoire comme 150px, puis je peux voir les 150px supérieurs de l'image, mais ce n'est pas la solution car il n'y a pas de hauteur fixe. J'ai eu un jeu et j'ai trouvé qu'une fois qu'il y a une hauteur (testée avec 150px), je peux utiliser 'background-size: 100%' pour adapter correctement l'image dans le div. Je peux utiliser le CSS3 plus récent pour ce projet car il est uniquement destiné aux mobiles.
J'ai ajouté un exemple approximatif ci-dessous. Veuillez excuser les styles en ligne, mais je voulais donner un exemple de base pour essayer de rendre ma question un peu plus claire.
<div id="image-container">
<div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>
Dois-je peut-être donner au conteneur div une hauteur en pourcentage basée sur la page entière ou est-ce que je regarde cela complètement faux?
De plus, pensez-vous que les arrière-plans CSS sont le meilleur moyen de le faire? Il existe peut-être une technique qui sert différentes balises img en fonction de la largeur de l'appareil / de l'écran. L'idée générale est que le modèle de page de destination sera utilisé plusieurs fois avec différentes images de produits, je dois donc m'assurer de le développer de la meilleure façon possible.
Je m'excuse, c'est un peu long, mais je vais et vient de ce projet au suivant, alors j'aimerais que cette petite chose soit faite. Merci d'avance pour votre temps, c'est très apprécié. Cordialement