28172 sujets

CSS et mise en forme, CSS3

[CSS] Largeur img dans <div>

Salut à tous, je galère depuis un bout de temps pour caler une image à 100% dans un container, mon image reste étirée malgré mes multiples essais.

Voir le lien vers cette page pour exemple, il s'agit du thumbnail en bas à droite :
http://www.transmettrelecinema.com/acteur/boulghourjian-vatche/

Voici le css :
http://www.transmettrelecinema.com/wp-content/themes/transmettrelecinema/style.css

.list ._box .img_box {
	position: absolute;
	left:0px;
	width:180px;
	height:128px;
	overflow:hidden;
}

Pour info, j'ai tenté une largeur "auto" ou "100%" mais le pb se situe ailleurs…

Merci !
Modifié par naano (05 Jan 2017 - 09:47)
Raphael a écrit :
J'ai l'impression que ce que tu recherches s'appelle "object-fit".

Après, ça n'a pas l'air très compatible... Devinez avec qui ?

Je préfère la bonne vieille méthode de l'image placée dans une div parente, cette dernière étant en paramétrée avec un background-image et un bvackground-size:cover.
Administrateur
Olivier C a écrit :

Après, ça n'a pas l'air très compatible... Devinez avec qui ?.
Oui c'est pourquoi j'ai laissé le lien de l'article qui explique le souci de compatibilité ainsi que la technique alternative.

Olivier C a écrit :
Je préfère la bonne vieille méthode de l'image placée dans une div parente, cette dernière étant en paramétrée avec un background-image et un bvackground-size:cover.
Pas sûr de comprendre mais s'il s'agit de remplacer une image de contenu par une image de background CSS, ce n'est pas forcément le meilleur choix Smiley ohwell
Bonjour,
Une idée : Il semble que l'image soit étirée en hauteur car elle prend 100% de son conteneur,
or elle n'a pas les dimensions de son conteneur en fait, et ici du coup on augmente sa hauteur :

@media (min-width: 400px)
.list ._box img {
    width: 100%;
    height: 100%;
}


enlever height:100% le problème est résolu,
(ligne 3165 de style.css)
ou alors mettre une image de mêmes dimensions que le conteneur, à savoir 180x128, l'image mesure 180x101
Modifié par farang (04 Jan 2017 - 17:58)
Raphael a écrit :
Pas sûr de comprendre mais s'il s'agit de remplacer une image de contenu par une image de background CSS, ce n'est pas forcément le meilleur choix Smiley ohwell

Je voulais dire : on laisse l'image pour le référencement mais on l'englobe dans un élément parent sur lequel sera appliqué un background-image plus un background-size:cover...

Exemple en ligne (avec en plus ici un élément <picture>).
Modifié par Olivier C (01 Dec 2018 - 11:57)
Administrateur
Olivier C a écrit :

Je voulais dire : on laisse l'image pour le référencement.
... Et surtout pour l'accessibilité et parce que c'est fait pour ça Smiley cligne

Olivier C a écrit :
mais on l'englobe dans un élément parent sur lequel sera appliqué un background-image plus un background-size:cover...
OK pourquoi pas en effet. Mais ça me semble difficilement maintenable / automatisable, non ?
Merci à tous pour vos réponses, merci farang pour ton aide, en fait les images utilisées pour les fiches (films et auteurs) ne sont pas toutes de la même taille, certaines sont en 16/9 (voire scope), d'autres en 4/3, d'où mon souci de "covering" dans ma <div>.

J'ai enlevé la ligne "heigh: 100%" en ligne 3165 mais ça n'a pas suffit…
@media (min-width: 400px)
.list ._box img {
    width: 100%;
}

Smiley ohwell
Modifié par naano (05 Jan 2017 - 09:47)
Administrateur
naano a écrit :
J'ai enlevé la ligne "heigh: 100%" en ligne 3165 mais ça n'a pas suffit…
Non en effet. Il faut se tourner vers les solutions que Olivier C et moi t'avons proposées.
Raphael a écrit :
OK pourquoi pas en effet. Mais ça me semble difficilement maintenance / automatisable, non ?

Pas forcément : l'exemple que je donne en lien tourne sur un WordPress, il n'y a donc rien d'autre à faire que de glisser/déposer l'image à la manière de tous les médias de ce CMS. Évidement il faut créer/configurer un thème qui permet ce genre de chose.
Sujet clos
Aller à