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

html css gallery lightbox 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?

Odpowiedzi:

HTML:

CSS:

Przykład: