Style div to retrieve same dimensions as image inside-CodePudding

The

CodePudding user response：

let button = document.querySelector("button"); let imgs = document.querySelectorAll("img"); button.addEventListener("click", function (evt) { for (var i = 0; i < imgs.length; i ) { imgs[i].classList.toggle("hidden"); } });

div{ display: flex; flex-flow: row nowrap; justify-content: center; align-content: center; align-items: center; outline: 1px dashed blue; height: 100vh; width: 100%; } img{ max-width: 100%; width: auto; max-height: 100%; height: auto; flex: 1 1 auto; } .hidden{ display:none; }

<button>switch</button> <div> <img src="https://www.adobe.com/content/dam/cc/us/en/creative-cloud/photography/discover/landscape-photography/CODERED_B1_landscape_P2d_714x348.jpg.img.jpg" alt="pic1"> <img src="https://m.media-amazon.com/images/I/61WYsP5qScL.jpg" alt="pic1" > </div>

CodePudding user response：

I've got an mostly working example using display: flex, maybe someone can figure out the last problem and edit the code:

function log() { console.log("Click!"); }

.container { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 50%; padding: 0; background-color: lightgreen; } .zoom { max-height: 100%; max-width: 100%; margin: 0 auto; background-color: aqua; } img { max-width: 100%; max-height: 100%; }

<div style="height: 300px; display: flex; flex-direction: row; overflow: scroll; background-color: lightgray"> <div > <div onclick="log()"> <img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG" /> </div> </div> <div > <div onclick="log()"> <img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Eiffel_tower_at_dawn_horizontal.jpg" /> </div> </div> </div>

One remaining issue is that the .zoom-div has an unwanted amount of padding at the bottom that I can't seem to get rid of. This is not too bad and would probably work for my use case, but if anyone can assist fixing that would be very nice!

CodePudding user response：

This could be a really good opportunity to use background-image in CSS! There are a number of fields such as background-image, background-repeat, background-size, background-position in CSS that can all be used to help us use images in a box. The only difference is that if we wanted to swap it out in JS, we would just have to set a new value for style.backgroundImage.

When you run the following code snippet, try editing the picsum image size or other properties for background- properties!

#img-container-wide { width: 200px; height: 100px; border: 1px solid green; display: flex; justify-content: center; align-items: center; background-image: url("https://picsum.photos/200/300"); background-repeat: no-repeat; background-size: contain; background-position: center; } #img-container-tall { width: 100px; height: 200px; border: 1px solid blue; display: flex; justify-content: center; align-items: center; background-image: url("https://picsum.photos/200/300"); background-repeat: no-repeat; background-size: contain; background-position: center; }

<div id="img-container-wide"></div> <div id="img-container-tall"></div>