CSS: larghezza o altezza del 100% mantenendo le proporzioni?

Attualmente, con STYLE, posso usare width: 100%e autosull'altezza (o viceversa), ma non riesco ancora a vincolare l'immagine in una posizione specifica, essendo rispettivamente troppo ampia o troppo alta.

Qualche idea?

Se si definisce solo una dimensione su un'immagine, le proporzioni dell'immagine verranno sempre mantenute.

Il problema è che l'immagine è più grande / più alta di quella che preferisci?

È possibile inserirlo in un DIV impostato sull'altezza / larghezza massima desiderata per l'immagine, quindi impostare overflow: nascosto. Ciò taglierebbe qualsiasi cosa oltre ciò che desideri.

Se un'immagine è larga al 100% e in altezza: auto e pensi che sia troppo alta, ciò è dovuto al fatto che le proporzioni sono preservate. Dovrai ritagliare o modificare le proporzioni.

Fornisci ulteriori informazioni su ciò che stai specificamente cercando di realizzare e cercherò di aiutarti di più!

--- MODIFICA BASATA SULLE RISPOSTE ---

Sei familiarità con il max-width e max-height proprietà? Puoi sempre impostare quelli invece. Se non imposti alcun minimo e imposti un'altezza e una larghezza massime, l'immagine non verrà distorta (le proporzioni verranno conservate) e non sarà più grande di qualsiasi dimensione sia più lunga e raggiunga il massimo.

Alcuni anni dopo, cercando lo stesso requisito, ho trovato un'opzione CSS che utilizzava la dimensione dello sfondo.

Dovrebbe funzionare nei browser moderni (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

E lo stile:

#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;
}

Il riferimento: http://www.w3schools.com/cssref/css3_pr_background-size.asp

E la demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Impostando la max-widthproprietà CSS su 100%, un'immagine riempirà la larghezza del suo elemento genitore, ma non renderà più grande della sua dimensione reale, preservando così la risoluzione.

L'impostazione della heightproprietà per automantenere le proporzioni dell'immagine, utilizzando questa tecnica consente di sovrascrivere l'altezza statica e consente all'immagine di flettersi proporzionalmente in tutte le direzioni.

img {
    max-width: 100%;
    height: auto;      
}

Semplice soluzione di lavoro elegante:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Aveva lo stesso problema. Il problema per me era che la proprietà height era già stata definita altrove, risolto in questo modo:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Soluzione semplice:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

A proposito, se vuoi centrarlo in un contenitore div parent, puoi aggiungere quelle proprietà css:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Dovrebbe davvero funzionare come previsto :)

Una delle risposte include la dimensione dello sfondo: contiene un'istruzione css che mi piace molto perché è un'affermazione semplice di ciò che vuoi fare e il browser lo fa.

Purtroppo prima o poi dovrai applicare un'ombra che purtroppo non giocherà bene con le soluzioni di immagine di sfondo.

Quindi diciamo che hai un contenitore che è reattivo ma ha confini ben definiti per larghezza e altezza min e max.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

E il contenitore ha un img che deve essere consapevole dei pixel dell'altezza del contenitore per evitare di ottenere un'immagine molto alta che trabocca o è ritagliata.

Il img dovrebbe anche definire una larghezza massima del 100% per consentire innanzitutto il rendering di larghezze più piccole e, in secondo luogo, basato su una percentuale che lo rende parametrico.

.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);
}

Nota che ha una bella ombra;)

Goditi un esempio dal vivo a questo violino: http://jsfiddle.net/pligor/gx8qthqL/2/

Lo uso per un contenitore rettangolare con altezza e larghezza fisse, ma con immagini di dimensioni diverse.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

È meglio usare l'auto sulla dimensione che dovrebbe rispettare le proporzioni. Se non imposti l'altra proprietà su auto, oggigiorno la maggior parte dei browser suppone che desideri rispettare le proporzioni, ma non tutte (ad esempio IE10 su Windows Phone 8 non lo fa)

width: 100%;
height: auto;

Questa è una soluzione molto semplice che mi è venuta in mente dopo aver seguito il link di conca e aver visto le dimensioni dello sfondo. Fa esplodere l'immagine e poi la inserisce centrata nel contenitore esterno senza ridimensionarla.

<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); />

Non saltare a un vecchio problema, ma ...

#container img {
      max-width:100%;
      height:auto !important;
}

Anche se questo non è corretto quando usi l'override! Importante sull'altezza, se stai usando un CMS come WordPress che imposta l'altezza e la larghezza per te, funziona bene.

Oggi si può usare vwe vhunità, che rappresentano 1% delle v iewport è w hezza ed h rispettivamente otto.

https://css-tricks.com/fun-viewport-units/

Quindi, per esempio:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... renderà l'immagine più larga possibile, mantenendo le proporzioni, ma senza essere più larga o più alta del 100% del viewport.

Usa JQuery o giù di lì, poiché CSS è un malinteso generale (le innumerevoli domande e discussioni qui sui semplici obiettivi di progettazione lo dimostrano).

Con i CSS non è possibile fare ciò che sembri desiderare: l'immagine deve avere una larghezza del 100%, ma se questa larghezza risulta in un'altezza troppo grande, deve essere applicata un'altezza massima - e ovviamente le proporzioni corrette devono essere conservato.

Penso che questo sia ciò che stai cercando, lo stavo cercando da solo, ma poi me ne sono ricordato di nuovo prima di aver trovato il codice.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

l'evoluzione digitale sta arrivando.