简体   繁体   中英

How to set dynamic width for parent depending on image width using only css

I am creating my own lightbox with React and I want to set width on div with class .lightbox-active depending on image width. For now, I have set max-width: 50%; max-height: 80% max-width: 50%; max-height: 80% for parent element and when eg the image is filling only 43% of parent element I want to set 43% width for a parent. Is there any way to achieve this without calculating the width in js?

<div className="lightbox-active">
  <img onLoad={() => isFinished()} src={fakeImages[openedImage - 1].url} alt="" />
</div>

My image has got property object-fit: contain and I need this for display image in original proportions, without this image is filling 50% width as it's parent but overflowing height.

Working example:

https://codepen.io/freestyle09/pen/rNNdNNg

Border green should have sizes like an image

 * { box-sizing: border-box; margin: 0; padding: 0; }.lightbox { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); }.lightbox-active { display: flex; justify-content: center; max-width: 50%; max-height: 80%; border: 1px solid red; }.lightbox-active img { max-width: 100%; max-height: 100%; object-fit: contain; border: 2px solid green; }
 <div class="lightbox"> <div class="lightbox-active"> <img src='https://picsum.photos/1503/1500' alt="" /> </div> </div>

I have a solution, which can be achieved using position: absolute . It can work for you as you want.

You have to modify the css of .lightbox-active and .lightbox-active img to use absolute positioning.

 * { box-sizing: border-box; margin: 0; padding: 0; }.lightbox { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); }.lightbox-active { max-width: 50%; max-height: 80%; border: 1px solid red; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }.lightbox-active img { max-width: 100%; max-height: 100%; object-fit: contain; border: 2px solid green; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
 <div class="lightbox"> <div class="lightbox-active"> <img src='https://picsum.photos/1503/1500' alt="" /> </div> </div>

Using inline block and overflow hidden can solve your issue to some extent. But the image will be cropped at the bottom if image is larger than available space.

Refer the code snippet below.

 * { box-sizing: border-box; margin: 0; padding: 0; }.lightbox { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); }.lightbox-active { display: inline-block; overflow:hidden; justify-content: center; max-width: 50%; max-height: 80%; border: 1px solid red; }.lightbox-active img { max-width: 100%; max-height: 100%; object-fit: contain; border: 2px solid green; }
 <div class="lightbox"> <div class="lightbox-active"> <img src='https://picsum.photos/1503/1500' alt="" /> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM