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

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>

Rozwiń fragment

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.

Obraz nie zostanie przycięty
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

0

transform: scale(0.5);

Przykład:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

patrz: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— Mahmoud K.
ź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

Zmieniasz proporcjonalnie rozmiary obrazów za pomocą CSS?

HTML:

CSS:

Przykład: