28111 sujets

CSS et mise en forme, CSS3

Background-size: cover;

Bonjour, malgré mes recherches je ne parviens pas à "couvrir" mon image d'arrière-plan en gardant son ratio dans une fenêtre prédéfinie, voici le css :

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


image arrière-plan :
@media (min-width: 400px) {
	.list ._box img {
		width: auto;
		height: 128px;
	}
}


Pour y voir plus clair, l'url en question :
http://www.transmettrelecinema.com/dispositif/lyceens-et-apprentis-au-cinema-2017-2018/

Une idée ? Smiley ohwell
Salut,

tu devrais préciser également
width: 180px; 

@media (min-width: 400px) {
	.list ._box img {
		width: auto;
		height: 128px;
		width: 180px;
	}
}

Modifié par JENCAL (09 Apr 2018 - 14:18)
Administrateur
Hello,

Si tu positionnes .list ._box .img_box en absolute, la boite sort du flux et n'occupe plus que la hauteur de son contenu.
S'il n'y a aucun contenu réel (= juste une image de fond), alors ta boîte n'a pas de hauteur.

Le problème provient peut-être de là.
Modérateur
Salut,

Pour rajouter une couche aux pistes, j'aurais également positionné en absolute l'img dans .img_box en lui donnant juste des min-height / min-width. Il doit y avoir un blocage avec les dimensions/proportions par défaut des images dans le flux

.list ._box img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: auto;
    min-height: 100%;
    min-width: 100%;
}


(pour être franc, en fait j'aurais mis les images en background, mais bon... Smiley langue )
Merci Jencal, malheureusement mon image apparaît "anamorphosée" et ne tient pas compte du recouvrement en fonction de hauteur ou de la largeur d'une image Smiley decu
Administrateur
_laurent a écrit :
(pour être franc, en fait j'aurais mis les images en background, mais bon... Smiley langue )

Ah, mais... l'image n'est pas en background ?? Effectivement, quel est l'intérêt ici de choisir l'élément HTML img plutôt qu'une image de fond ?
Ce site a été développé sous WordPress, les tailles d'images sont générées automatiquement lors de l'upload via l'interface admin, il y en a des milliers, voici pourquoi il n'y a pas d'image en background…
Sujet clos
Aller à