使带有 img 的 div 适合页面高度

Question

I have a simple container with images that looks like a table, so HTML and CSS would look like:

 .cab.net { padding: 0; margin: 0; display: flex; flex-direction: column; }.module { display: table-cell; background-color: black; }.module > button > img { width: 100%; }.cab.net-info-button { padding: 0; border: none; background: none; }

 <div class="cab.net"> <div> <div class="module"> <button class="cab.net-info-button"> <img src="https://images.unsplash.com/photo-1500577329392-f0af6d7dd827?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" /> </button> </div> <div class="module"> <button class="cab.net-info-button"> <img src="https://images.unsplash.com/photo-1500577329392-f0af6d7dd827?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" /> </button> </div> </div> <div> <div class="module"> <button class="cab.net-info-button"> <img src="https://images.unsplash.com/photo-1500577329392-f0af6d7dd827?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" /> </button> </div> <div class="module"> <button class="cab.net-info-button"> <img src="https://images.unsplash.com/photo-1500577329392-f0af6d7dd827?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80)" /> </button> </div> </div> <div> <div class="module"> <button class="cab.net-info-button"> <img src="https://images.unsplash.com/photo-1500577329392-f0af6d7dd827?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" /> </button> </div> <div class="module"> <button class="cab.net-info-button"> <img src="https://images.unsplash.com/photo-1500577329392-f0af6d7dd827?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" /> </button> </div> </div> </div>

I would like this to auto-fit my browser's height , I managed to manipulate the width of the element, but it's not exactly what I expected.
In fact, if I flip the screen that is higher than it's width, it will (for example) fit to 25% width, leaving lots of empty space beneath.

I tried setting the height at 100vh or 100%, but it gives me nothing, is there any way?

Answer 1

You can try to put inside the image tag object-fit:cover so whenever the height of the div is adjusted the image will also cover the whole div width and height. Alternatively, though this might take time by using child elements of your class module you can alternately set each images to backgrounds of each module class.

Like this:

.module {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width: ; // set your own width
    height: ; // set your own height
}

.module:first-child {
    background-image:url(images/image1.png);
}

.module:nth-child(2) {
    background-image:url(images/image2.png);
}

.module:nth-child(3) {
    background-image:url(images/image3.png);
}

.module:nth-child(4) {
    background-image:url(images/image4.png);
}