Zmieniasz proporcjonalnie rozmiary obrazów za pomocą CSS?

107

Od kilku dni próbuję skonfigurować moją galerię miniatur, aby wszystkie obrazy miały tę samą wysokość i szerokość. Jednak gdy zmieniam kod CSS na,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Otrzymuję obrazy, które mają ten sam rozmiar, ale współczynnik proporcji jest rozciągnięty, co psuje obrazy. czy nie ma sposobu na zmianę rozmiaru kontenera obrazu, a nie obrazu zamiast tego? pozwalając mi zachować proporcje. ale nadal zmień rozmiar obrazu. (Nie mam nic przeciwko, gdybym odciął część obrazu.)

Z góry dziękuję!

Beaniie
źródło

Odpowiedzi:

184

jest to znany problem ze zmianą rozmiaru CSS, chyba że wszystkie obrazy mają te same proporcje, nie możesz tego zrobić przez CSS.

Najlepszym podejściem byłoby posiadanie kontenera i zmiana rozmiaru jednego z wymiarów (zawsze takich samych) obrazów. W moim przykładzie zmieniłem szerokość.

Jeśli kontener ma określony wymiar (w moim przykładzie szerokość), mówiąc obrazowi, aby miał szerokość na poziomie 100%, sprawi, że będzie on miał pełną szerokość kontenera. Na autowysokości obraz będzie miał wysokość proporcjonalną do nowej szerokości.

Dawny:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}
jackJoe
źródło
42

Musisz naprawić jedną stronę (np. Wysokość), a drugą ustawić auto.

Na przykład

 height: 120px;
 width: auto;

To przeskalowałoby obraz na podstawie tylko jednej strony. Jeśli uznasz, że przycinanie obrazu jest do przyjęcia, możesz po prostu ustawić

overflow: hidden; 

do elementu nadrzędnego, co spowodowałoby wycięcie wszystkiego, co w innym przypadku przekroczyłoby jego rozmiar.

Nick Andriopoulos
źródło
Próbowałem tego, ale nadal daje mi to obrazy, które mają różne rozmiary i kształty. Chcę, aby galeria była jednolita, tak jak ta, [] [] [] [], a nie [] [] [] [] []
Beaniie
2
użyj kombinacji obu powyższych: ustaw wysokość na liczbę (z automatyczną szerokością, aby zachować skalę) i ogranicz rodzica do określonej szerokości, overflow: hiddenaby przyciąć nadmiar
Nick Andriopoulos
25

Możesz użyć object-fitwłaściwości css3, na przykład

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Nie jest to jednak do końca Twoja odpowiedź, bo nie naciąga kontenera, ale zachowuje się jak galeria i sam możesz dalej stylizować img.

Kolejną wadą tego rozwiązania jest nadal słaba obsługa właściwości css3. Więcej szczegółów można znaleźć tutaj: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Znajdziesz tam również rozwiązanie jQuery.

dmitry_romanov
źródło
Dzięki, fajne rozwiązanie. :)
Bibhu,
Dziwne jest odpowiadanie na pytanie, które jest obsługiwane tylko w bankomatach operowych ?! caniuse.com/object-fit
Simon Dragsbæk,
4
Rozumiem, @Simon, dziękuję. Wspomniałem, że nie mam pojęcia, czy ta właściwość będzie obsługiwana wszędzie, ale nawet jeśli nie , możemy ją wykorzystać jako punkt wyjścia do wyszukania w Google alternatyw, które ją zastąpią. Innym powodem do publikowania jest to, że odpowiedź pozostanie przez jakiś czas, podczas gdy przeglądarki będą się poprawiać z każdym dniem, więc odpowiedziałem, że celuję również w tę najbliższą przyszłość .
dmitry_romanov
1
Wchodząc na tę stronę kilka lat później, z przyjemnością znalazłem tę „przyszłą” odpowiedź!
petzi,
8

Aby obrazy były regulowane / elastyczne, możesz użyć tego:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
Stanislav
źródło
5

Umieść go jako tło na swoim uchwycie np

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Spowoduje to wyśrodkowanie obrazu wewnątrz elementu div 120x120, odcinającego nadmiar obrazu

DickieBoy
źródło
2

Jeśli nie chcesz rozciągać obrazu, umieść go w kontenerze div bez przepełnienia i wyśrodkuj, dostosowując margines w razie potrzeby.

  1. Obraz nie zostanie przycięty
  2. Współczynnik proporcji również pozostanie taki sam.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}
Bhushan Dangore
źródło
-1

jeśli znasz współczynnik widma, możesz użyć dopełnienia dolnego z procentem, aby ustawić wysokość w zależności od różnicy.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>
reco
źródło