Предотвращение визуального отражения страницы при загрузке эскизов

Question

Я загружаю несколько эскизов на страницу, между 50 или 100. Даже если это не обязательно, я хочу поставить какую-то высоту и ширину в элемент <img>, так что это не так. 't вызывает визуальное отражение страницы после загрузки изображений.

Я не знаю точной ширины или высоты каждого изображения. Я точно знаю, что ширина и высота изображения никогда не будут больше 125 пикселей. Итак, у меня могут быть изображения типа 125x125, 100x80, 45x90 и т. Д. ... но не более 125 по ширине или высоте.

Есть ли способ предотвратить визуальное отражение страницы, зная, что я только что упомянул?

Благодаря

Answer 1

Если я вас правильно понял, вы должны обернуть элемент в (или блочного типа элемента) и установить мин ширину и высоту мин на новом дел. Если вы хотите, чтобы он занимал только минимальное пространство, используйте 45 и 90 в качестве минимальной суммы. если вы хотите, чтобы он занимал общее возможное пространство, используйте 125 в качестве минимальной суммы. как так:

<div class="img-holder> 
    <img src="path/to/image" /> 
</div> 

И в вашем CSS:

.img-holder { 
    min-width: 45px; 
    min-height: 90px; 
}