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

174

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?

Weston Watson
źródło
3
czy możesz opublikować link lub zrzut ekranu, aby pokazać przykład problemu?
Mauro

Odpowiedzi:

138

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.

Andrzej
źródło
16
jeśli obraz jest wyższy niż szeroki, użyłbym wysokości = 100% i szerokości = auto, jeśli obraz jest szerszy niż wysoki, użyłbym szerokości = 100%, wysokości = auto. po prostu nigdy nie wiem, o co chodzi? kadrowanie według maksymalnej wysokości / szerokości zadziałałoby - ale jeśli jest sposób na to - wolałbym tego użyć ...
Weston Watson
2
Czy projektujesz układ płynny czy o stałej szerokości? Jeśli korzystasz z układu o stałej szerokości, zawsze możesz ustawić szerokość na 100%, a obraz będzie odpowiednio skalowany, ale może być bardzo wysoki. Czy próbujesz umieścić obraz w bloku tekstu, czy użyć go jako banera lub tła? Gdybyś mógł pokazać stronę, na której planujesz jej użyć, lub opisać kontekst, mógłbym ci bardziej pomóc. Zobacz również zmiany powyżej.
Andrew,
użycie maksymalnej wysokości na moim img pozwoliło mi ograniczyć obrazy przy jednoczesnym zachowaniu ich proporcji
północnoamerykańska
2
object-fitnie używać?
LeeGee
77

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

conca
źródło
3
idealne rozwiązanie, które niestety nie jest obsługiwane przez IE8 :(
japrescott,
Jest to idealne rozwiązanie, ale jeśli robisz to w karuzelach, powoduje to, że obrazy są puste przez sekundę po każdym slajdzie.
kloddant
58

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;      
}
Adam Waite
źródło
1
jeszcze ustawienie heightdo autoprzyczyn reflow, gdy obraz jest płynął
Gregory Pakosz
42

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%);
}
user3334941
źródło
3
Dzięki za przypomnienie object-fit. Dokładnie to, czego potrzebowałem.
Ash Clarke
5
Jest to idealne rozwiązanie, ale niestety object-fitnie jest obsługiwane w żadnej wersji IE ani Edge od 28 marca 2017 r.
Simon G
2
Od marca 2019 ta funkcja ma 90% wsparcia - więc to naprawdę należy uznać za poprawną odpowiedź.
Hampus Ahlgren
object-fit: containobject-fit: coverwidthpx
Zwróć
Próbowałem object-fitz max-widthi max-heightjak w innych odpowiedziach, ale to nie zadziałało. działa to doskonale w przypadku losowych rozmiarów obrazu, nawet z widthiheight 100%
Halfacht
27

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;
}
Flo
źródło
Dokładnie to, czego szukałem. Dzięki milionowi koleś.
London Smith
Idealne, gdy rozmiar obrazu może być mniejszy lub większy niż nadrzędny element div, a jego rozmiar zostanie zmieniony na idealne centrum z maksymalną szerokością LUB maksymalną wysokością. Nie musisz używać obrazu jako tła, które po prostu przepełni rodzica, jeśli zostanie ustawione na "okładka".
Rehmat
9

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 :)

Alexis K
źródło
głosował za pierwszą część. druga część mi nie wyszła ... :(
Vikas Bansal
Tylko jeden problem - jeśli obraz jest większy niż 100% pojemnika, wysypie się i będzie wymagał pasków przewijania lub przycięcia. Nie jestem pewien, jak osiągnąć to samo i nadal ograniczać maksymalny rozmiar do kontenera. Jeśli ustawisz maksymalną szerokość i wysokość, nie zachowa już proporcji.
JustAMartin
5

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/

George Pligoropoulos
źródło
Pozdrawiam - dokładnie to, czego szukałem.
Eli
Dzięki za te rozwiązania i link do jsdfiddle. To faktycznie zadziałało w mojej galerii obrazów reakcji, w której używam zarówno obrazów o większej wysokości, jak i obrazów o większej szerokości. :)
Eugenijus S.
4

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;
}
Alejandro Salamanca Mazuelo
źródło
3

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;
Davy
źródło
2

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); />
bill davis
źródło
Dobre i sprytne rozwiązanie! Z dodatkowymi 40% kompensujesz współczynnik kształtu. Dzięki!
Sascha,
Możesz też po prostu background-size: contain;dopasować obraz do tła.
Simon G
1

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.

Levi G
źródło
1

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.

Jonas Berlin
źródło
0

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.

Ungesund
źródło
-2

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.

Peter Gruppelaar
źródło