#Remove scrollbar from Modal and resize image to take no more than 100% of Modal viewport

4 messages · Page 1 of 1 (latest)

hardy wadi
hardy wadi
#

If you want to make an image take up 100% width or 100% height depending on which is more, you can use CSS to achieve this.

One way to do this is to set the image as the background of a container element and use the CSS background-size property to make it cover the container.

Here's an example code snippet:

<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
</div>

.image-container {
position: relative;
width: 100%;
height: 100%;
}

.image-container img {
display: none;
}

.image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url('your-image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 100%;
height: 100%;
}

In this example, the img element is hidden using display: none; so that it doesn't appear on the page. Instead, a pseudo-element (::before) is created for the container with the background-image property set to the image file.

The background-size property is set to contain, which means the background image will be scaled up or down to fit within the container while maintaining its aspect ratio. This ensures that either the width or height of the image will take up 100% of the container, depending on which is larger.

The width and height properties of the container are set to 100% so that it takes up the full size of its parent element.

#

chatgpt answer

narrow hedge
#

chakra can do this, i asked before: #🔥-alpha-releases message , ill post my work mantinev6 code for you later