CODEWITHSUNDEEP
htmlcssbootstrap-modalresponsive
Benevides
Benevides

Reputation: 25

How can the image not overflow on the height

I want to make the image fit inside the parent div, however, on some screen sizes, the image is overflowing on the height axis.

It's all fine with normal size images, but with huge image, like a 15000 x 10800 image, the image still respects the parent width, but exceeds the height

I can use max-height: -webkit-fill-available; with chrome, but firefox doesn't support -moz-available on max-height

I am using bootstrap 4, but I made some CSS modifications.

Screenshot: Broken image

HTML:

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="imageZoomModalTitle">Galeria</h5>
        <button type="button" class="custon-close-button-color close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <img class="img-modal" src="xyz" >
    </div>
</div>

CSS:

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px;
  border-radius: 0;
  box-shadow: none;
}

.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

Edit This is the result I am searching for. That image is using max-height: -webkit-fill-available; on the .img-modal Screenshot

Upvotes: 2

Views: 286

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

Variant 1. Hide the rest of the image with the overflow property:

.modal-body {
    overflow: hidden;
}

Variant 2: Place the image as a background for the modal body and set the background-size property to cover or contain.

Is any of these solutions suitable for you?

UPDATE. Bootstrap 4 modal with a big image as a background.

https://codepen.io/glebkema/pen/wvKNJPW

.custom-modal .modal-dialog {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: none;
	margin: 0;
}

.custom-modal .modal-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 2px;
	border-radius: 0;
	box-shadow: none;
}

.custom-modal .modal-body {
	background: url("http://glebkema.ru/images/glebkema_iphone_9623_w1000.jpg") center / contain no-repeat;
}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Launch demo modal
</button>

<!-- Modal -->
<div class="modal custom-modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="imageZoomModalTitle">Galeria</h5>
				<button type="button" class="custon-close-button-color close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body"></div>
		</div>
	</div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions