Как центрировать изображения в div с фиксированной высотой, используя Bootstrap? - PullRequest
Новая
       31

Как центрировать изображения в div с фиксированной высотой, используя Bootstrap?

0 голосов
/ 09 ноября 2019

Я хочу сделать фиксированный размер <div> с изображениями в нем. У меня есть эта jsp часть (если нужно больше, я добавлю) 

<html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="carousel-inner">
 <div class="carousel-item active">
  <img style="margin-top: 5px; max-width: 350px; max-height: 200px; display:block; margin-left: auto;
 margin-right: auto" src="img/${i.imageURLs.get(0)}" height="200" width="350">
 </div>
 <c:forEach var="img" items="${i.imageURLs}">
  <c:if test="${img != i.imageURLs.get(0)}">
   <div class="carousel-item">
    <img style="margin-top: 5px; max-width: 350px; max-height: 200px; display: block; margin-left: auto;
 margin-right: auto" src="img/${img}" height="200" width="350">
   </div>
  </c:if>
 </c:forEach>
</div>
</body>
</html>

CSS это 

img {
    width: auto;
    height: auto;
    margin-bottom: auto;
    margin-top: auto;
}

Это представление jsp страницы с коллекцией URL-адресов изображенийвнутри него. Проблема в том, что изображения с неправильной высотой уменьшают высоту моего div, и весь квадрат становится меньше (по крайней мере, пропорции в порядке).

what i want everywhere what I see xd

Как правильно установить стиль <img> для их вертикального центрирования или сделать нижние поля динамическими в зависимости от высоты изображения? Без width: auto; height: auto; нет нужного результата, поэтому я должен был использовать оба стиля из <img> и CSS.

Ответы [ 3 ]

0 голосов
/ 10 ноября 2019

Как сказал chriskirknielsen , object-fit: contain и установка max-height: 200px в height: 200px сделали ожидаемое поведение.

0 голосов
/ 10 ноября 2019

Вы можете сделать это. 

.image-parent {
  height: 200px;
  display: flex;
  align-items: center;
}

.img {
  max-width: 100%;
  height: auto;
}

Я установил родителя на 200px, чтобы у каждого родителя была одинаковая высота.

align-items: center; будет центрировать содержимое родительского элемента по вертикальной оси, что должно решить вашу проблему

Я также добавил max-width: 100%`` and высота: авто for images to make them responsive. For this you can use bootstrap4 class img-fluid or bootstrap3 img-отзывчивый`` `

Вы можете

0 голосов
/ 10 ноября 2019

На теге изображения, Добавить выравнивание по центру 

<img style="margin-top: 5px; **align: center;** max-width: 350px; max-height: 200px; display:block; margin-left: auto;
     margin-right: auto" src="img/${i.imageURLs.get(0)}" height="200" width="350" >
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...