Сделать изображения одинаковыми по высоте средствами CSS

Сделать изображения одинаковыми по высоте средствами CSS В поисках решения такой задачки было взято простое решение. Выводились изображения разной высоты и разной ширины, чтобы упорядочить их по высоте нужно было средствами css изменить стиль отображения. Размеры изображений не известны, ровно как и ширина их. Оказалось, что сталкиваются с такими задачами практически все. Подумалось, что простое решение может быть таким:
img {
    height: 100px;
    width: auto;
    margin: 0 10px;
}
Но, это как-то слишком некрасиво. Случайно заглянул на схожее обсуждение и нашел вполне пригодное решение для этих целей:
<div class="container">
    <div class="element">
        <img src="https://www.muzeumlotnictwa.pl/digitalizacja_archiwaliow/katalog/ksiazki/10/platowiec_pws_26_katalog_czesci/13d.jpg" />
    </div>
    <div class="element">
        <img src="https://cdn.doublemesh.com/wp-content/uploads/2013/08/SendPress-Email-Marketing-and-Newsletters.jpg" />
    </div>
    <div class="element">
        <img src="https://media.moddb.com/images/downloads/1/1/373/profile.jpg" />
    </div>
</div>
И css для этого кода:
.element
{
    overflow:hidden;
    width:100px;
    height: 100px;
    border: 1px #000 solid;
    margin: 5px;
    float: left;
    
    position: relative;
}

.element img
{
    position: absolute;
    top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
 

Полезная информация:

Во время загрузки произошла ошибка... WordPress
Woocommerce заказы со статусом "ожидание оплаты" автоматически отменяются
Управления ссылками WordPress плагин WPNoExternalLinks
Как добавить алиас домена ISPConfig
Исправляем проблемы с кодировкой (utf-8 charset)
Breadcrumbs редактировать в Cherry FrameWork
Обновляем WordPress до 3.5
Польза простых файлов .bat
Форма контактов для WordPress
Удаление плагинов WordPress
Удаляем второй meta name=description от All in One Seo Pack
Еще раз SSH Find и размер файлов
Woocommerce WaitingList
Как изменить длину анонса (excerpt) плагин
Как быстро узнать версию ISPConfig 3 (ssh)
Шаблон Mantra изменения вида пагинации
Joomla/Mambo To WordPress Migrator Fatal error (решение)
Правильный robots.txt
Грамотный robots.txt для WordPress 4.х
ISPConfig 3 установить флаг active в MyDNS
Вывод материалов из рубрики списком WordPress
Добавление бесплатного SSL сертификата на WordPress
Backup сайта в DropBox
Как склеить домены (301 редирект)
WP-PageNavi добавление пагинации
Красивые WordPress caption
Добавить валюту (руб.) в woocommerce
Обвести текст при помощи HTML и CSS
Переезд на новый домен
Несколько простых команд для Cent OS
Плагин карты сайта XML
Полная русификация Woocommerce
Правильные анонимайзеры
Русификация плагина «NextGEN Gallery» (файл)
Добавить html в категорию и страницу
Добавление меню в старый шаблон WordPress
Убрать category из ссылки WP (продолжение)
Javascript прокрутки страницы
Как распечатать каталог содержимого на диске
Как убрать точки li в меню
Полезные плагины WordPress
Ошибка Deprecated: Function ereg() is deprecated in /samefile.php on line 142
Полезные фотосервисы
TimThumb error has occured WordPress
Как в Mac Os X заменить QIP
Простой плагин email рассылки (Newsletter) для WordPress
При обновлении произошла ошибка: Не удалось определить директорию содержимого
Как убрать ссылку из плагина iSape в WordPress
WordPress Super Cache - кто такой?
Woocommerce: изменить "Спасибо. Ваш заказ был принят."
Доступ к namebased сайту без DNS-записи в Windows
ISPManager установить SSL сертификат
Красивые письма с WP Better Emails
Площадки для размещения статей
Html в конце ссылки статей в WordPress
Метки: , , , , . Закладка Постоянная ссылка.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.