Изображения разных размеров рядом?
У меня есть 5 изображений, и их ширина и высота отличаются друг от друга.
Я пытаюсь разместить эти 5 изображений рядом в центре и убедиться, что высота всех изображений одинакова. Я пробовал flex, grid, float и position, чтобы сделать его как можно ближе, но все же некоторые изображения на несколько пикселей выше или ниже, а одно изображение очень маленькое по сравнению с другим.
HTML.
<div class = "container">
<img class = "leagues" id = "l1" src = "assets/img/ligue1.png" alt = "">
<img class = "leagues" id = "pl" src = "assets/img/premierleague.png" alt = "">
<img class = "leagues" id = "cl" src = "assets/img/championsleague.png" alt = "">
<img class = "leagues" id = "la" src = "assets/img/laliga.png" alt = "">
<img class = "leagues" id = "bl" src = "assets/img/bundesliga.png" alt = "">
</div>
css.
.leagues {
display: flex;
flex-wrap: wrap;
flex-direction: row;
float: left;
overflow: hidden;
max-height: 160px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
Если есть какие-либо учебные пособия или сайты, которые покажут, как размещать изображения разных размеров рядом и делать одинаковую высоту с помощью Grid или Flexbox, это было бы неплохо.
Спасибо.
Обновлено:
почистил CSS и теперь он выглядит так.
.container {
display: flex;
justify-content: center;
}
.leagues {
height: 200px;
width: auto;
}
и вот изображение того, как это выглядит. как вы можете видеть, логотип «премьер-лиги» намного меньше, чем другие, а логотип ligue1 на 2-3 пикселя меньше, чем остальные. https://imgur.com/a/aS9UPth
Изображения имеют разный размер. Хотите показывать изображения с одинаковой высотой и шириной? (и по центру)
Ответы 3
display:flex должен быть передан родительскому элементу, и если вы хотите, чтобы они были одинаковой высоты, вы должны установить значение для высоты и позволить ширине быть автоматическим, если общая ширина всех изображений не больше, чем их родитель, они будут быть в ряду.
см. учебник по flex box на w3schools:
Гибкое свойство CSS
CSS флексбокс
Спасибо за ответы. Я почистил CSS и сделал, как вы сказали, и. .container -> display:flex и justify-content: center. .leagues -> height: 200px и width: auto Но все равно одна картинка на 2-3 px меньше другой, а другая картинка очень маленькая. Мол, он не растягивается, не покрывает и не наполняет. здесь вы можете увидеть, как это выглядит. imgur.com/a/aS9UPth
когда высота имеет определенный размер, а ширина установлена автоматически, ширина элементов будет установлена в соответствии с их высотой и исходным изображением. исходный размер ваших изображений отличается, поэтому они не будут иметь одинаковую ширину. если вы настаиваете на том же размере, вы также можете установить значение ширины, это может снизить качество ваших изображений. вы также можете попробовать обрезать изображения одинакового размера
либо сделать их высоту одинаковой (изменив изображение, обрезав его), либо присвоить им определенную высоту
ТЛ, ДР; Вероятно, это то, что вы ищете:
.container > img {
height: 100%;
width: auto;
}
.container {
height: 160px;
display: flex;
justify-content: center;
}
Фактический ответ:
Вам нужно указать, где height должны отображаться все изображения.
Возможно, вы захотите указать его с помощью CSS или использовать либо самое короткое, либо самое высокое изображение:
Жесткий код с использованием CSS:
.container > img {
height: 150px;
width: auto;
}<div class = "container">
<img src = "https://via.placeholder.com/150x100" alt = "">
<img src = "https://via.placeholder.com/150x125" alt = "">
<img src = "https://via.placeholder.com/150x150" alt = "">
<img src = "https://via.placeholder.com/150x175" alt = "">
<img src = "https://via.placeholder.com/150x200" alt = "">
</div>Используйте самое короткое изображение:
$(window).on('load', function(){
let height;
$.each($('.container'), function(_i, container){
$.each($('img', container), function (_i, img) {
height = height
? Math.min(height, $(img).height())
: $(img).height();
});
$.each($('img', container), function(_i, img){ $(img).height(height) });
});
}).container > img {
width: auto;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<img src = "https://via.placeholder.com/150x100" alt = "">
<img src = "https://via.placeholder.com/150x125" alt = "">
<img src = "https://via.placeholder.com/150x150" alt = "">
<img src = "https://via.placeholder.com/150x175" alt = "">
<img src = "https://via.placeholder.com/150x200" alt = "">
</div>Используйте самое высокое изображение:
$(window).on('load', function(){
let height;
$.each($('.container'), function(_i, container){
$.each($('img', container), function (_i, img) {
height = height
? Math.max(height, $(img).height())
: $(img).height();
});
$.each($('img', container), function(_i, img){ $(img).height(height) });
});
}).container > img {
width: auto;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<img src = "https://via.placeholder.com/150x100" alt = "">
<img src = "https://via.placeholder.com/150x125" alt = "">
<img src = "https://via.placeholder.com/150x150" alt = "">
<img src = "https://via.placeholder.com/150x175" alt = "">
<img src = "https://via.placeholder.com/150x200" alt = "">
</div>Как видите, пока вы указываете одинаковую высоту для всех, и width:auto они уже будут отображаться рядом друг с другом, и все, что вам нужно сделать, это отцентрировать .container в его родительском элементе, добавив display: flex; justify-content: center; к родителю .container.
Пример:
$(window).on('load', function(){
let height;
$.each($('.container'), function(_i, container){
$.each($('img', container), function (_i, img) {
height = height
? Math.min(height, $(img).height())
: $(img).height();
});
$.each($('img', container), function(_i, img){ $(img).height(height) });
});
}).container > img {
width: auto;
}
.center-me {
display: flex;
justify-content: center;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "center-me">
<div class = "container"
><img src = "https://via.placeholder.com/150x100" alt = ""
><img src = "https://via.placeholder.com/150x125" alt = ""
><img src = "https://via.placeholder.com/150x150" alt = ""
><img src = "https://via.placeholder.com/150x175" alt = ""
><img src = "https://via.placeholder.com/150x200" alt = ""
></div>
</div>PS: я использовал jQuery для получения и установки высоты изображения, так как он менее подробный, чем ваниль. Если кому-то это нужно, я могу написать эквивалент без jQuery, но здесь это кажется излишним.
PS 2: Возможно, вы захотите заменить селектор .container на более конкретный, если вы не хотите, чтобы все изображения в каждом из ваших .containers уменьшались или увеличивались до самого короткого или самого высокого в этом конкретном контейнере. Это касается как JS, так и CSS.
И последнее, но не менее важное: высота может быть жестко закодирована в родительском элементе, и для этого не потребуется JavaScript, почти как в первом примере:
.container > img {
height: 100%;
width: auto;
}
.container {
height: 120px;
display: flex;
justify-content: center;
}<div class = "container">
<img src = "https://via.placeholder.com/150x100" alt = "">
<img src = "https://via.placeholder.com/150x125" alt = "">
<img src = "https://via.placeholder.com/150x150" alt = "">
<img src = "https://via.placeholder.com/150x175" alt = "">
<img src = "https://via.placeholder.com/150x200" alt = "">
</div>Спасибо. Я отредактировал css выше, и вот как выглядит вывод. Лига 1 на 2-3 пикселя меньше, чем другие изображения. Премьер-лига очень маленькая, даже если изображение превышает 1000 пикселей, как будто я не могу увеличить это изображение, закрыть или заполнить его. imgur.com/a/aS9UPth
Пожалуйста, предоставьте ссылку на пример, чтобы я мог посмотреть на код, который на самом деле применяется. Я не могу отладить скриншот.
Привет, Вот ссылка с кодом, который действительно применяется. jsfiddle.net/kbLqh3w2
Все изображения имеют высоту точно140px. Посмотрите здесь - каждое изображение имеет красную верхнюю и нижнюю границу. (Я также удалил бесполезный CSS и использовал другую технику для вертикального центрирования в теле, но это не главное).
@ DMT82, перезагрузи скрипку выше. Я добавил немного CSS, чтобы было очень легко заметить размер изображения при наведении.
Интересно, но опять же, высота логотипа Премьер-лиги, лев намного меньше, чем другие. Как же мне сделать так, чтобы высота соответствовала остальным? Это что-то, что я делаю с Photoshop и удаляю пробелы сверху и снизу каждого изображения, или это какой-то способ заполнить, закрыть логотип, чтобы высота была одинаковой, даже если каждое изображение в контейнере составляет 140 пикселей. Я имею в виду, даже если он растянется, это не будет проблемой, и спасибо, что помогли мне.
CSS делает то, что вы от него просили. Если вы хотите, чтобы все символы имели одинаковые поля/отступы, вам понадобится редактор изображений. Самый простой способ, вероятно, — просто обрезать изображение точно по краям каждого логотипа и сохранить их как таковые, чтобы вы могли управлять отступами с помощью CSS (с оберткой для каждого). И нет, CSS не может проанализировать содержимое изображения и принять решение об его обрезке на основе содержимого. Для CSS это просто объект, загружающий несколько пикселей.
Спасибо тебе большое. Попытаюсь изменить размер каждого изображения, чтобы они имели одинаковую высоту, удалить все лишние пробелы внутри изображений и повторить попытку. Еще раз, спасибо.
После изменения высоты каждого изображения, равного наименьшему изображению, теперь все подходит. Странно, что вы не можете разместить 2 изображения с разной высотой и шириной рядом и обрезать, заполнить, накрыть изображения, чтобы они соответствовали одинаковой высоте, без использования фотошопа и обрезать каждое изображение, чтобы оно подходило.
.container{ display:flex}вместоleaguesw3schools.com/Css/css3_flexbox.asp