CSS: 100% szerokości lub wysokości przy zachowaniu współczynnika proporcji?

Obecnie w STYLE mogę używać width: 100%i autona wysokości (lub odwrotnie), ale nadal nie mogę ograniczyć obrazu do określonej pozycji, odpowiednio będąc zbyt szerokim lub zbyt wysokim.

Jakieś pomysły?

Jeśli zdefiniujesz tylko jeden wymiar na obrazku, proporcje obrazu będą zawsze zachowane.

Czy problem polega na tym, że obraz jest większy / wyższy niż wolisz?

Możesz umieścić go wewnątrz DIV, który jest ustawiony na maksymalną wysokość / szerokość, jaką chcesz dla obrazu, a następnie ustawić przepełnienie: ukryte. To wykroiłoby wszystko poza to, czego chcesz.

Jeśli obraz ma 100% szerokości i wysokości: auto i uważasz, że jest za wysoki, jest to szczególnie spowodowane zachowaniem współczynnika proporcji. Musisz przyciąć lub zmienić proporcje.

Podaj więcej informacji o tym, co konkretnie próbujesz osiągnąć, a ja postaram się pomóc.

--- EDYTUJ NA PODSTAWIE OPINII ---

Czy znasz właściwości max-width i max-height ? Zawsze możesz je ustawić zamiast tego. Jeśli nie ustawisz żadnego minimum i ustawisz maksymalną wysokość i szerokość, obraz nie zostanie zniekształcony (zostanie zachowany współczynnik proporcji) i nie będzie większy niż którykolwiek z wymiarów jest najdłuższy i osiągnie maksimum.

Kilka lat później, szukając tego samego wymagania, znalazłem opcję CSS używającą rozmiaru tła.

Ma działać w nowoczesnych przeglądarkach (IE9 +).

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

I styl:

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

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

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

Ustawiając max-widthwłaściwość CSS na 100%, obraz wypełni szerokość elementu nadrzędnego, ale nie będzie renderowany w rozmiarze większym niż rzeczywisty, zachowując w ten sposób rozdzielczość.

Ustawienie heightwłaściwości tak, aby autozachowywało proporcje obrazu, użycie tej techniki umożliwia zastąpienie statycznej wysokości i umożliwia proporcjonalne wyginanie obrazu we wszystkich kierunkach.

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

Proste, eleganckie rozwiązanie robocze:

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

Miałem ten sam problem. Problem dla mnie polegał na tym, że właściwość wysokości była już zdefiniowana w innym miejscu, naprawiłem to w ten sposób:

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

Proste rozwiązanie:

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

Przy okazji, jeśli chcesz wyśrodkować go w nadrzędnym kontenerze div, możesz dodać te właściwości css:

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

Powinno naprawdę działać zgodnie z oczekiwaniami :)

Jedna z odpowiedzi zawiera stwierdzenie background-size: include css, które bardzo mi się podoba, ponieważ jest to proste stwierdzenie tego, co chcesz zrobić, a przeglądarka po prostu to robi.

Niestety prędzej czy później będziesz musiał zastosować cień, który niestety nie będzie dobrze współgrał z rozwiązaniami dotyczącymi obrazu tła.

Powiedzmy więc, że masz kontener, który jest responsywny, ale ma dobrze zdefiniowane granice minimalnej i maksymalnej szerokości i wysokości.

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

Kontener ma obraz, który musi uwzględniać piksele wysokości kontenera, aby uniknąć uzyskania bardzo wysokiego obrazu, który przepełnia się lub jest przycięty.

Obraz powinien również definiować maksymalną szerokość równą 100%, aby po pierwsze umożliwić renderowanie mniejszych szerokości, a po drugie, aby był oparty na procentach, co czyni go parametrycznym.

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

Zauważ, że ma ładny cień;)

Ciesz się przykładem na żywo na tych skrzypcach: http://jsfiddle.net/pligor/gx8qthqL/2/

Używam tego do prostokątnego pojemnika o stałej wysokości i szerokości, ale z obrazami o różnych rozmiarach.

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

Najlepiej jest używać auto na wymiarze, który powinien uwzględniać proporcje. Jeśli nie ustawisz drugiej właściwości na auto, większość przeglądarek będzie obecnie zakładać, że chcesz przestrzegać współczynnika proporcji, ale nie wszystkie z nich (na przykład IE10 na Windows Phone 8 nie)

width: 100%;
height: auto;

To bardzo proste rozwiązanie, które wymyśliłem po podążaniu za linkiem conca i sprawdzeniu rozmiaru tła. Wysadza obraz w górę, a następnie dopasowuje go do środka w zewnętrznym pojemniku bez skalowania.

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

Nie po to, żeby wskakiwać do starego problemu, ale ...

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

Nawet jeśli nie jest to właściwe, ponieważ używasz! Important override na wysokości, jeśli używasz CMS, takiego jak WordPress, który ustawia dla Ciebie wysokość i szerokość, działa to dobrze.

Obecnie można stosować vwi vhurządzeń, co stanowi 1% v iewport'S w IDþ i h ośmiu odpowiednio.

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

Na przykład:

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

... sprawi, że obraz będzie tak szeroki, jak to możliwe, zachowując proporcje, ale bez szerszego ani większego niż 100% obszaru roboczego.

Użyj JQuery lub czegoś podobnego, ponieważ CSS jest ogólnym nieporozumieniem (niezliczone pytania i dyskusje na temat prostych celów projektowych pokazują to).

W CSS nie jest możliwe zrobienie tego, co chcesz: obraz powinien mieć szerokość 100%, ale jeśli ta szerokość powoduje wysokość, która jest zbyt duża, obowiązuje maksymalna wysokość - i oczywiście prawidłowe proporcje powinny być zachowane.

Myślę, że tego właśnie szukałeś, szukałem tego sam, ale potem przypomniałem sobie to ponownie, zanim znalazłem kod.

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

ewolucja cyfrowa jest na dobrej drodze.