Zmiana rozmiarów obrazów proporcjonalnie za pomocą CSS?

Od kilku dni próbuję skonfigurować moją galerię miniaturek, aby wszystkie obrazy wyglądały na tej samej wysokości i szerokości. Jednak gdy zmienię kod Css na, 

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

Dostaję obrazy o tej samej wielkości, ale proporcje są rozciągnięte. czy nie ma sposobu na zmianę rozmiaru kontenera obrazu,a nie obrazu zamiast tego? pozwalając mi zachować proporcje. ale zmień rozmiar obrazu. (Nie mam nic przeciwko, jeśli odciąć część obrazu.)

Dzięki z góry!

Author: jackJoe, 2013-03-28
Source

6 answers

Jest to znany problem ze zmianą rozmiaru CSS, chyba że wszystkie obrazy mają taką samą proporcję, nie masz sposobu, aby to zrobić za pomocą CSS.

Najlepszym rozwiązaniem byłoby posiadanie kontenera i zmiana rozmiaru jednego z wymiarów (zawsze tego samego) obrazów. W moim przykładzie zmieniłem rozmiar szerokości.

Jeśli kontener ma określony wymiar( w moim przykładzie szerokość), to kiedy obraz ma mieć szerokość 100%, będzie to pełna szerokość kontenera. auto na wysokości będzie spraw, aby wysokość obrazu była proporcjonalna do nowej szerokości.

Ex:

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;
}
 137
Author: jackJoe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-28 15:27:23

Musisz naprawić jedną stronę (np. wysokość) i ustawić drugą na auto.

Eg 

 height: 120px;
 width: auto;

To skalowałoby obraz tylko na jednej stronie. Jeśli uznasz, że kadrowanie obrazu jest dopuszczalne, możesz po prostu ustawić 

overflow: hidden;

Do elementu nadrzędnego, który wydzieliłby wszystko, co w przeciwnym razie przekroczyłoby jego rozmiar.

 30
Author: Nick Andriopoulos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-28 15:23:32

Możesz użyć object-fit właściwości css3, coś w rodzaju 

<!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>

To nie jest do końca Twoja odpowiedź, ponieważ nie rozciąga kontenera, ale zachowuje się jak Galeria i możesz nadal stylizować img.

Kolejną wadą tego rozwiązania jest wciąż słabe wsparcie 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 / . rozwiązanie jQuery można znaleźć tam też.
 18
Author: dmitry_romanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-09 19:11:33

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

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
 7
Author: Stanislav,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-30 17:08:09

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

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

To wyśrodkuje Twój obraz wewnątrz div 120x120, odcinając wszelki nadmiar obrazu

 5
Author: DickieBoy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-28 15:27:39

Jeśli znasz współczynnik spect, możesz użyć padding-bottom 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>
 0
Author: reco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-13 20:59:57