Сохранение пропорций динамически загруженного изображения

На моем сайте пользователи могут загружать фотографии. Они могут быть разных размеров, но я хочу, чтобы они поместились в коробки одинаковой высоты, чтобы их можно было поставить рядом друг с другом и сформировать сетку. Изображение должно быть сосредоточено в ящике, сохраняя его соотношение сторон. Могу ли я сделать это в CSS? Я пробовал вещи с помощью flexbox, но я не могу заставить его работать.Сохранение пропорций динамически загруженного изображения

например.

Если высота больше, чем ширина:

|-------------| 
| imageim | 
| ageimag | 
| eimagei | 
| mageima | 
| geimage | 
| imageim | 
|-------------|

Если ширина больше, чем высота:

|-------------| 
|    | 
|imageimageima| 
|geimageimagei| 
|mageimageimag| 
|eimageimageim| 
|    | 
|-------------|

источник

2016-06-11 raichu

Я пробовал это, но это не сработало. Может быть, это потому, что высота и ширина моего содержащего div установлены на 100% вместо фиксированного значения? – raichu

Посмотрите это сообщение и ответьте, если это поможет - http://stackoverflow.com/q/34713763/483779, но имейте в виду подробности поддержки браузера. – Stickers

Отправленный ответ для вас, хотя лучше понять, что вы ищете, картина, показывающая ожидаемый макет с сочетанием размеров изображений, была бы замечательной. – LGSon

Вот сетка 5 x 5, масштабируемая, загружаемая, с использованием flex.

Fiddle version

.parent { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.parent a { 
 
    display: inline-block; 
 
    height: calc(20% - 2px); 
 
    width: calc(20% - 2px); 
 
    background: #ddd no-repeat center center; 
 
    background-size: contain; 
 
    margin: 1px; 
 
} 
 
.parent a:nth-child(odd) { 
 
    background-image: url(http://lorempixel.com/300/150/animals/3); 
 
} 
 
.parent a:nth-child(even) { 
 
    background-image: url(http://lorempixel.com/150/300/animals/3); 
 
}

<div class="parent"> 
 
    
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 

 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 

 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 

 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 

 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a> 
 
    <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a> 
 

 
</div>

источник

2016-06-11 15:48:47 LGSon

Спасибо за ответ. Существует один недостаток вашего решения. Изображения не могут быть загружены. Раздел сайта будет функционировать как своего рода фотокнига, поэтому было бы неплохо, если бы пользователи могли загружать фотографии. Кроме того, я хотел бы, чтобы изображения масштабировались с окружающим div, поэтому ширина и высота должны быть выражены в% вместо пикселей. Я пытаюсь создать сетку с 5 столбцами и 5 строками. Я мог бы попытаться сделать это в JavaScript, но сначала хотел бы знать, есть ли решение css, возможно, используя новые макеты, такие как flexbox (о которых я мало знаю). – raichu

@raichu Обновлено мой ответ с предложением – LGSon

Спасибо! Потрясающие. Я весь день ходил с помощью flexboxes. :) – raichu

height: 100px; 
width: auto;

будет изменять размер изображения, чтобы соответствовать этой высоте.

источник

2016-06-11 13:20:25 Achshar

Спасибо за помощь, но это работает только в одной ситуации: когда изображение ориентировано вертикально. Но люди также должны иметь возможность размещать горизонтально ориентированные изображения. – raichu

Почему бы не работать тогда? Он будет масштабировать изображения независимо от их размеров. Горизонтальная или вертикальная. Вы можете добавить центр выравнивания текста к родительскому элементу, который вы хотите выровнять по центру. Или вы также хотите, чтобы ящик имел фиксированную ширину? В этом случае установите max-width: 100px. – Achshar

Коробка не должна быть фиксированной шириной, а процентом ее родителя. Целью является создание сетки для изображений пользователя. – raichu

Сохранение пропорций динамически загруженного изображения

ответ

Смежные вопросы