107

Я вже пару днів намагаюся налаштувати свою галерею мініатюр, щоб усі зображення виходили однакової висоти та ширини. Однак коли я змінюю код Css на,

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

Я отримую зображення однакового розміру, але пропорції розтягуються, що руйнує зображення. чи не існує способу змінити розмір контейнера для зображення, а не зображення? що дозволяє зберегти співвідношення сторін. але змінити розмір зображення. (Я не проти, якщо я відрізаю частину зображення.)

Спасибі заздалегідь!

— Beaniie
джерело

184

це відома проблема із зміною розміру CSS, якщо всі зображення не мають однакової пропорції, у вас немає способу зробити це за допомогою CSS.

Найкращим підходом було б мати контейнер і змінити розмір одного з розмірів (завжди однакових) зображень. У своєму прикладі я змінив розмір ширини.

Якщо контейнер має вказаний розмір (у моєму прикладі ширина), коли зображення повідомляє, що ширина має 100%, це зробить його повною шириною контейнера. На autoвисоті зображення зробить висоту пропорційною новій ширині.

Наприклад:

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
джерело

41

Вам потрібно зафіксувати одну сторону (наприклад, висоту), а іншу встановити на auto.

Напр

 height: 120px;
 width: auto;

Це може масштабувати зображення лише на одній стороні. Якщо ви вважаєте обрізання зображення прийнятним, його можна просто встановити

overflow: hidden;

до батьківського елемента, який би вирізав усе, що в іншому випадку перевищило б його розмір.

— Нік Андріопулос
джерело

Я спробував це, але він все ще дає мені зображення, які мають різні розміри та форми, я хочу, щоб галерея була рівномірною, як так, [] [] [] [] не подобається [] [] [] [] []

— Beaniie

2

використовуйте комбінацію обох вищезазначених: встановіть висоту на число (з автоматичною шириною, щоб зберегти масштаб), а обмежте батьківську на конкретну ширину, overflow: hiddenщоб обрізати надлишки

— Нік Андріопулос,

25

Ви можете використовувати object-fitвластивість css3, щось подібне

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

Розгорніть фрагмент

Хоча це не зовсім ваша відповідь, тому що він не розтягує контейнер, але він поводиться як галерея, і ви можете продовжувати стилізацію imgсебе.

Ще одним недоліком цього рішення є погана підтримка властивості css3. Більш детальну інформацію можна знайти тут: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Рішення jQuery також можна знайти там.

— dmitry_romanov
джерело

Дякую, приємне рішення. :)

— Бібху

Це якось дивно відповідати властивістю, яке підтримується лише в атма-операх ?! caniuse.com/object-fit

— Simon Dragsbæk

4

Я бачу вашу думку, @Simon, дякую. Я згадував, що не маю поняття, чи буде власність підтримуватися всюди, але навіть якщо вона не буде , ми можемо використовувати її як вихідну точку для google для альтернатив, які її замінюють. Ще одна причина для публікації - це те, що відповідь залишатиметься на деякий час, поки браузери з кожним днем стають все кращими, тому я відповів націлитись на це найближчим часом .

— dmitry_romanov

1

Перейшовши на цю сторінку через кілька років, я був радий знайти цю "майбутню" відповідь!

— petzi

8

Щоб зробити зображення регульованими / гнучкими, ви можете скористатися цим:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— Станіслав
джерело

5

Покладіть його як тло на свій тримач, наприклад

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

Це дозволить зосереджувати зображення у розділі 120x120, відсікаючи надлишки зображення

— DickieBoy
джерело

2

Якщо ви не хочете розтягувати зображення, помістіть його в контейнер div без переповнення і відцентруйте його, якщо потрібно, налаштовуючи його поле.

Зображення не буде обрізане
Співвідношення сторін також залишиться колишнім.

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
джерело

0

transform: scale(0.5);

Приклад:

<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;
}

дивіться: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— Махмуд К.
джерело

-1

якщо ви знаєте коефіцієнт спектру, ви можете використовувати нижню частину з відсотком, щоб встановити висоту залежно від різниці.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— відновлення
джерело

Зміна розмірів зображення пропорційно за допомогою CSS?

HTML:

CSS:

Приклад: