Как ограничить размер изображения не более размера блока в котором оно находится?
.banner {
background-color: green;
height: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<html>
<body>
<div class="container-fluid p-3 banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
Контент 1
</div>
<div class="col-lg-6 d-flex justify-content-end">
<img src="https://gudvil.com.ua/wp-content/uploads/2020/04/image-1.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</body>
</html>Почему-то изображение вылазит на границы блока banner
Буду благодарен за помощь!
Ответы (1 шт):
Автор решения: Laukhin Andrey
→ Ссылка
Почему-то изображение вылазит на границы блока banner
В данном случае, изображение ведет себя предсказуемо, т.к. мы явно не ограничили его размер. Мы можем указать картинке конкретную высоту, или 100%. В последнем случае, возникает вопрос, 100% относительно чего? Мы должны указать размер родительскому элементу. И тут история повторяется и у нас тот же вопрос, должна быть задана высота, и так далее. Думаю мысль понятна.
В Bootstrap есть вспомогательные классы .w-*, .h-*, .mw-*, .mh-*.
.banner {
background-color: green;
height: 200px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid banner">
<div class="row p-3 h-100">
<div class="col-6">Контент 12</div>
<div class="col-6 mh-100">
<img src="https://gudvil.com.ua/wp-content/uploads/2020/04/image-1.jpg" class="mh-100 mw-100">
</div>
</div>
</div>