9
votes

redimensionner des images en utilisant% dans CSS

J'essaie de créer une disposition Web liquide en utilisant% pour autant de choses que possible. J'ai frappé une bosse lors du redimensionnement des images.

Les deux: xxx

et xxx

ne fonctionne pas correctement avec l'attribute hauteur. Ils redimensionnent la largeur de l'image à 20% du conteneur, mais la hauteur reste relative à la taille de l'image. (Je tente de faire des carrés)


0 commentaires

3 Réponses :


1
votes

Vous devriez recadrer l'image. Une fois que vous utilisez un% pour la largeur ou la hauteur, je pense que le navigateur essaie de préserver le rapport de format, quelle que soit la valeur de l'autre dimension.


1 commentaires

J'ai essayé d'utiliser% pour la largeur / la hauteur, mais mon navigateur ne préserve pas le rapport de format! (J'utilise Firefox 3.6) Comment puis-je modifier le code ci-dessus afin que les images gardent leur rapport d'aspect? Merci.



5
votes

Les pourcentages de hauteur code> et largeur code> d'une image fonctionne avec le conteneur qu'il est contenu dans. Pour atteindre l'effet de fluide, essayant juste de mettre dans un conteneur autour du img et donner une hauteur et une largeur d'image: 100% code>. Et maintenant, vous devriez changer la hauteur et la largeur du conteneur en pourcentages. Voici un exemple xxx pré>

avec cette image atteindra une hauteur et une largeur de 500 * 100. p>

Mise à jour b> P>

<div id="wrapper" style="border: 1px solid red; width: 900px; height: 400px;">
  <div id="imgcontainer" style="width: 100%; height: 50%;">
     <img src="ur-img" style="height: 100%; width: 100%;">
  </div>
</div>


6 commentaires

Et si le conteneur est un% de l'emballage?


Ouais ça marchera. Le conteneur est un

et prend des dimensions quelles manières:% âges ou pixels.


Cela fonctionne sur HelloWorld avec des images de dossier mais pas avec des images de DB, elle fait toujours toutes les formes différentes. Une idée pourquoi?


Pouvez-vous mettre en place la partie du code qui obtient les images de dB, peut alors être capable de suggérer une solution alors. Si je présume que vous obtenez simplement le chemin d'image de la base de données et que vous le mettez dans l'attribut «SRC» de l'image, il ne devrait y avoir aucun problème.


tandis que ($ i <$ rownums) {?> "Rel =" Lightbox [tout] " > " />


C'est tout non formaté mais essentiellement ouais, j'utilise 2 fichiers, un pour obtenir tous les identifiants et une pour obtenir l'image basée sur le get Thets envoyé au fichier comme SRC pour obtenir ceci:



1
votes

Si vous souhaitez que la largeur de l'image soit un pourcentage de son conteneur, et pour que l'image maintienne son rapport d'image d'origine, définissez la largeur en pourcentage et définissez la hauteur sur Auto: xxx


2 commentaires

C'est ce qu'il ne veut pas alex.


Oh, j'ai supposé que les images originales étaient des carrés, mais peut-être que ce n'est pas le cas.