CSS: 100% largeur ou hauteur tout en conservant les proportions?
Actuellement, avec STYLE, je peux utiliser width: 100% et auto sur la hauteur (ou l'inverse), mais je ne peux toujours pas contraindre l'image dans une position spécifique, qu'elle soit trop large ou trop haute. respectivement.
Des idées?
Si vous ne définissez qu'une seule dimension sur une image, le format de l'image sera toujours conservé.
Le problème est-il que l'image est plus grande/plus grande que vous préférez?
Vous pouvez le placer dans un DIV défini sur la hauteur/largeur maximale souhaitée pour l'image, puis définir le débordement: masqué. Cela recadrerait n'importe quoi au-delà de ce que vous voulez.
Si une image est 100% large et hauteur: auto et que vous la trouvez trop haute, c'est que le rapport de format est préservé. Vous aurez besoin de recadrer ou de changer le rapport de format.
Veuillez fournir des informations supplémentaires sur ce que vous essayez spécifiquement d'accomplir et j'essaierai de vous aider davantage!
--- EDIT BASE SUR LE FEEDBACK ---
Connaissez-vous les propriétés max-width et max-height ? Vous pouvez toujours définir ceux à la place. Si vous ne définissez aucun minimum et que vous définissez une hauteur et une largeur maximales, votre image ne sera pas déformée (le rapport de format sera préservée) et sa taille ne sera pas supérieure à celle de la dimension la plus longue et atteignant son maximum.
Quelques années plus tard, recherchant le même besoin, j'ai trouvé une option CSS utilisant background-size.
Il est supposé fonctionner dans les navigateurs modernes (IE9 +).
<div id="container" style="background-image:url(myimage.png)">
</div>
Et le style:
#container
{
width: 100px; /*or 70%, or what you want*/
height: 200px; /*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
La référence: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Et la démo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
En définissant la propriété CSS max-width sur 100%, une image remplira la largeur de son élément parent, mais son rendu ne sera pas supérieur à sa taille réelle, préservant ainsi la résolution.
Définir la propriété height sur auto conserve le rapport de format de l'image. Cette technique permet de remplacer la hauteur statique et de permettre à l'image de se plier proportionnellement dans toutes les directions.
img {
max-width: 100%;
height: auto;
}
Solution de travail simple et élégante:
img {
width: 600px; /*width of parent container*/
height: 350px; /*height of parent container*/
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Avait le même problème. Le problème pour moi était que la propriété height était déjà définie ailleurs, la corrige comme ceci:
.img{
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
Solution simple:
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
À propos, si vous voulez le centrer dans un conteneur div parent, vous pouvez ajouter ces propriétés css:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Cela devrait vraiment fonctionner comme prévu :)
L'une des réponses inclut l'instruction css taille de fond: contient qui me plait beaucoup, car elle énonce clairement ce que vous voulez faire et que le navigateur le fait.
Malheureusement, tôt ou tard, vous devrez appliquer une ombre qui ne fonctionnera malheureusement pas bien avec les solutions d’image d’arrière-plan.
Supposons donc que vous avez un conteneur qui est sensible mais dont les limites sont bien définies pour la largeur et la hauteur minimales et maximales.
.photo {
max-width: 150px;
min-width: 75px;
max-height: 150px;
min-height: 75px;
}
Et le conteneur a un img qui doit être conscient des pixels de la hauteur du conteneur afin d'éviter d'obtenir une image très haute qui déborde ou est recadrée.
Img devrait également définir une largeur maximale de 100% afin de permettre le rendu des largeurs plus petites et le pourcentage basé sur celui-ci, ce qui le rend paramétrique.
.photo > img {
max-width: 100%;
max-height: 150px;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
box-shadow: 0 0 13px 3px rgba(0,0,0,1);
}
Notez qu'il a une belle ombre;)
Profitez d'un exemple en direct sur ce violon: http://jsfiddle.net/pligor/gx8qthqL/2/
J'utilise ceci pour un conteneur rectangulaire dont la hauteur et la largeur sont fixes, mais avec des images de différentes tailles.
img {
max-width: 95%;
max-height: 15em;
width: auto !important;
}
Il est préférable d’utiliser auto sur la dimension qui doit respecter les proportions. Si vous ne définissez pas l'autre propriété sur auto, la plupart des navigateurs supposent aujourd'hui que vous souhaitez respecter le rapport hauteur/largeur, mais pas tous (IE10 sur Windows Phone 8 ne le fait pas, par exemple).
width: 100%;
height: auto;
C'est une solution très simple que j'ai proposée après avoir suivi le lien de Conca et examiné la taille de l'arrière-plan. Il gonfle l'image et l'ajuste ensuite centrée dans le conteneur externe sans la redimensionner.
<style>
#cropcontainer
{
width: 100%;
height: 100%;
background-size: 140%;
background-position: center;
background-repeat: no-repeat;
}
</style>
<div id="cropcontainer" style="background-image: url(yoururl); />
Ne pas sauter dans un vieux problème, mais ...
#container img {
max-width:100%;
height:auto !important;
}
Même si cela n’est pas correct car vous utilisez le paramètre important sur la hauteur, si vous utilisez un CMS tel que WordPress qui définit la hauteur et la largeur, cela fonctionne bien.
Utilisez JQuery ou autre, car CSS est une idée fausse générale (les innombrables questions et discussions ici sur les objectifs de conception simples le prouvent).
Il n’est pas possible avec CSS de faire ce que vous semblez vouloir: l’image doit avoir une largeur de 100%, mais si cette largeur donne une hauteur trop grande, une hauteur maximale doit être appliquée - et bien sûr les proportions correctes doivent être respectées. conservé.