Clip ou crop

Bonjour,
je souhaite réduire la hauteur des images pour la version smartphone.
En gros, elles passeront du format 4x3 au 16x9 pour réduire le scroll.

img[width="220"][height="165"] {
	position:absolute;
	clip:rect(20px,300px,125px,0px);
}
img[width="220"][height="165"] + * {margin-top:125px;}

Ce qui me gène, c'est l'utilisation de la position absolue qui semble obligatoire et qui m'oblige à bricoler une marge avec un sélecteur *.

Une meilleure solution semble être la propriété crop mais je ne trouve aucune info et je ne parviens pas à l'utiliser. Un peu d'aide s'il vous plaît ?
Modifié par olivier56 (11 Jul 2012 - 11:53)

Bonjour,

effectivement, cette propriété n'existe qu'à l'état d'un brouillon datant de 2003... Et n'est supportée par aucun navigateur.

Si ton image disposait d'un conteneur, tu pourrais plus facilement gérer le position:absolute en lui conférant des dimensions. Est-ce possible dans ton cas ?

Merci pour votre réponse

Quel dommage pour CROP...

La solution du parent m'obligerait à englober toutes les images... Je trouve la combinaison absolute et sélecteur * mois grave, même si ça reste du bricolage.

Bon, voici ma solution. Plutôt que d'avoir une image recadrée, je divise ses dimensions par 2, ainsi la résolution double .

Et la vous me dites, il reste un cratère.

Du coup j'ajoute des bords blancs et une ombre portée pour donner un style "vignette".

img[width="300"][height="150"] {
	width:150px;
	height:75px;
	border-style:solid;
	border-color:#fff;
	border-width:10px 75px;
	box-shadow:0 2px 6px rgb(50,50,50);
}