Comment puis-je faire côte à côte des images d'égale hauteur (CSS/HTML)?
Deux images, l'une est 300x400 pixels (hauteur x largeur), l'autre est 500x600. Comment puis-je faire apparaître côte à côte, à l'échelle de sorte qu'ils sont de la même hauteur sur l'écran, qui occupe toute la largeur de la page (ou conteneur/div), sans changer le ratio d'aspect de l'image?
J'aimerais HTML/CSS façon de le faire -- quelque chose qui fonctionne depuis plus de 2 images si possible. Actuellement, je calculer manuellement la largeur de chaque image (en mathématiques ci-dessous).
EDIT:
Un exemple de ce que je suis en train de faire:
<img src="http://stackoverflow.com/content/img/so/logo.png"
width="79%" style="float:left" border=1 />
<img src="http://stackoverflow.com/content/img/so/vote-favorite-off.png"
width="20%" border=1 />
Utilisé la formule ci-dessous (ou d'essai et d'erreur) à venir avec 79/20 split. Notez que 79 + 20 < 100 -- si je l'ai mis à 80/20 puis, les images enveloppe due à la frontière. Comment puis-je le faire sans avoir à faire n'importe quel calcul? Le navigateur doit être en mesure de le faire pour moi.
ah1 = 300 //actual height of image 1
aw1 = 400 //actual width of image 1
ah2 = 500 //actual height of image 2
aw2 = 600 //actual width of image 2
//need to calculate these:
dw1 //display width of image 1, expressed as percent
dw2 //display width of image 2, expressed as percent
dw1 + dw2 == 100%
s1 = dw1 / aw1 //scale of image 1 (how much it has been shrunk)
s2 = dw2 / aw2
dh1 = ah1 * s1 //display height of image 1 = its actual height * its scale factor
dh2 = ah2 * s2
//need to solve this equality to get equal display heights:
dh1 == dh2
s1 * ah1 == s2 * ah2
dw1 / aw1 * ah1 == dw2 / aw2 * ah2
dw1 / aw1 * ah1 == (1 - dw1) / aw2 * ah2
dw1 * aw2 * ah1 == (1 - dw1) * aw1 * ah2
dw1 * aw2 * ah1 == aw1 * ah2 - aw1 * ah2 * dw1
dw1 * aw2 * ah1 + aw1 * ah2 * dw1 == aw1 * ah2
dw1 * (aw2 * ah1 + aw1 * ah2) == aw1 * ah2
dw1 == aw1 * ah2 / (aw2 * ah1 + aw1 * ah2)
== 400 * 500 / (600 * 300 + 400 * 500)
== 20 / (18 + 20)
== 20 / 38
== 52.63% //which ends up as style="width:53%" which isn't quite right...
OriginalL'auteur Dan | 2009-07-23
Vous devez vous connecter pour publier un commentaire.
pourquoi ne pas tout simplement le réglage de la HAUTEUR de l'image une valeur d'attribut, sans en imputer la largeur ?
donc:
<img height="300" src="path/to/image.png" />
vous pouvez également réaliser cette via CSS, même principe: vous définissez la hauteur, et non pas la largeur. La mise à l'échelle sera proportionnelle...
donc, cela signifie que nous devons calculer la largeur/hauteur de valeurs pour chaque image indépendamment. Vous ne pouvez le faire soit sur le côté client (javascript) ou le server-side (via php par exemple) lors de la sortie de votre galerie balisage html. Quel est votre choix?
OriginalL'auteur pixeline
Si vous n'avez pas besoin d'eux pour mettre à l'échelle la même taille (pour afficher toute l'image), vous pouvez utiliser le CSS
clip
propriétéimg {
)
Il n'est, en effet, de la culture (ou "clip") l'image 😉 Ouais, je n'étais pas sûr si vous voudriez recadrée ou pas, mais étant donné que presque personne n'utilise clip je pensais le point comme une propriété utile. Je vous préviens que l'utilisation de CSS/(X)HTML à l'échelle des images est un navigateur intensive et pas forcément les plus flatteuses façon de montrer les images. Ce n'est pas pire de cette façon, c'est juste un coût de la méthode.
[suite]...également à l'aide de 'clip' signifie que vous n'avez pas à vous soucier de taille d'origine (sauf si vous voulez faire un chèque pour la plus petite image de dimensions et de tenir que l'coupées à la taille). Alors que l'aide de la CSS/XHTML exige, dans le regard de la, des calculs complexes. Sauf si vous allez arbitraire et le bâton avec un ensemble de dimensions.
OriginalL'auteur David Thomas
Réglage de la hauteur de travail. Rappelez-vous, vous pouvez utiliser des valeurs relatives, comme les pourcentages.
OriginalL'auteur Andrew Mason
OriginalL'auteur