Возьмите самый большой размер div и сделайте все одинаковыми

Я хотел бы взять самую большую высоту изображения со страницы и сделать все изображения одинаковой высоты, используя заполнители изображений или что-то еще, также чтобы быть отзывчивым: рабочий стол / мобильный телефон / таблица

Самое главное, мы говорим об изображениях. У меня есть изображение с высотой 600 пикселей и еще одно с высотой 300 пикселей. Возьмем такой сценарий:

<div id = "images">
    <img src = "" alt = "" width = "350" height = "600">
    <img src = "" alt = "" width = "350" height = "200">
    <img src = "" alt = "" width = "350" height = "350">
    <img src = "" alt = "" width = "350" height = "450">
    <img src = "" alt = "" width = "350" height = "350">
    <img src = "" alt = "" width = "350" height = "150">
    <img src = "" alt = "" width = "350" height = "350">
    <img src = "" alt = "" width = "350" height = "350">
    <img src = "" alt = "" width = "350" height = "550">
    <img src = "" alt = "" width = "350" height = "350">
</div>

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

Не могли бы вы показать нам, что вы пробовали до сих пор?

— 05.10.2018 23:57

javascript jquery html css

05.10.2018 23:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Если вы хотите сделать изображения адаптивными для настольных компьютеров, мобильных устройств или планшетов, вы можете установить ширину для использования 65vw вместо 350px.

Пример:

<img src = "https://en.wikipedia.org/wiki/File:Googlelogo.png" alt = "" style = "width:50vw">

Я думаю, вы могли бы сделать что-нибудь с помощью JavaScript для поиска по свойствам каждого изображения, чтобы найти самую большую высоту изображения ... Или, если вы установите это самостоятельно, это будет проще.

06.10.2018 00:13

Используйте фоновые изображения и вложенный div, чтобы установить соотношение сторон.

#images .image {
width: 350px; 
max-width: calc(50% - 5px);
float: left;
margin: 0 5px 5px 0;
display: inline-block; 
background-color: black;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
#images .image div {padding-top: 100%;}

<div id = "images">
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class = "image" style = "background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
</div>

06.10.2018 00:23

Другие вопросы по теме

Разница между индексом и данными в JavaScript?

Скрипт MutationObserver в расширении Chrome не может уловить изменения

Как создавать «поп-теги» в стиле Instagram

Как получить доступ к значениям в элементах ViewData?

Как изменить текст загрузки файла на изображение и загрузить файл и отобразить его в div

Используйте jQuery для изменения свойств CSS на кнопке на основе текста кнопки

Вызов программы javascript при нажатии на тело с ограничениями

Радио-вопрос - введите другой текст ответа

Повторно обработанный HTML не зависит от функциональности jQuery

Скрипт jQuery работает на jsFiddle, но не локально

Возьмите самый большой размер div и сделайте все одинаковыми

Ответы 2

Другие вопросы по теме

Похожие вопросы