CODEWITHSUNDEEP
htmlcssreactjs
Freestyle09
Freestyle09

Reputation: 5508

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% for parent element and when e.g. 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>

Upvotes: 1

Views: 1462

Answers (2)

Ankit Agarwal
Ankit Agarwal

Reputation: 1348

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>

Upvotes: 1

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

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>

Upvotes: 1

Related Questions