отображение всех изображений одного размера, независимо от его исходного размера

Question

У меня есть стол для члена. Когда я показываю все изображение в html, которое я помещаю, и все они отображаются с одинаковым размером, но когда я добавляю class = 'img-responsive', они возвращаются к исходному размеру.

Answer 1

Если вы хотите, чтобы заставить ширину/высоту img элемента, который вы можете использовать:

img { 
    width: 100px; 
    height: 100px; 
} 

В случае, если вы используете некоторые другие библиотеки, поведение CSS переопределение по умолчанию вы можете использовать !important :

img { 
    width: 100px !important; 
    height: 100px !important; 
} 

img-responsive класс от начальной загрузки будет установлено:

max-width: 100%; 
height: auto; 

К изображению, и если вы хотите определенную ширину/высоту - это не то, что вы ищете.

Answer 2

Хорошо, теперь я понимаю, о чем вы просили. Поэтому позвольте мне объяснить.

Все изображения имеют что-то, называемое отношением . Это может быть 1: 1, что означает, что для каждого 1px (или независимо от вашего измерения) есть 1px с другой стороны. Тогда 1: 2, поэтому для каждого 1px есть 2px с другой стороны и 1: 3, 1: 4 ... и т. Д.

Соотношение, которое вы хотели бы иметь, составляет соотношение 1: 1, которое составляет 100px * 100px.

Но это не может быть принудительно от изображения с другим соотношением сторон без искажения изображения. Компании, подобные facebook, делают это путем создания обрезанных версий изображения или придания ему фонового размера обложка.

Моя рекомендация будет создать DIV с высотой и шириной 100px и установить изображение в качестве фонового изображения следующим образом:

.divClass{ 
     background-repeat:no-repeat; 
     background-size:cover; 
     width:100px; 
     height:100px; 
} 

Затем добавьте следующую строку в ваш код PHP

<div class="divClass" style="background-image:url('image/location/<?php echo $imageName; ?>');"> 

Это позволит изображению заполнить div полностью, сохраняя соотношение сторон. Недостатки заключались бы в том, что некоторые изображения не будут видны, если соотношение сторон изображения не 1: 1, чего вы пытаетесь достичь. Также, если вы хотите изменить положение изображения, вы можете использовать свойство background-position.

Если вы хотите, чтобы увидеть все изображение, вы можете добавить всплывающее окно.

jQuery: How can I show an image popup onclick of the thumbnail?

Ваше окончательное решение будет обрезать изображения или позволить пользователю, чтобы обрезать изображение, прежде чем они загрузки. Ниже приведен большой плагин, который позволяет это.

https://fengyuanchen.github.io/cropperjs/