-1

Hello I want to change automatically container height to responsive image. I set container's display on flex. The image is between 2 div with class = "text-block". Div's have width of width: 37% and min-width: 37%. Image width is set to max-width:100% so it's responsive and change its width and height when I change screen width.

I want to shrink container's height with image height. The height of container has to be always equal to image height. Also I would like that container and image height does not exceeded 100vh when they are getting bigger.

PHOTO:

containers height adjust to img height

height of container and img don't exceed height of 100vh

LINK to problem: Here is my code on codepen: https://codepen.io/milkiway420/pen/xxrVgMZ

    body {
      height:100%;
    }
    .container{
      display: flex;
      width: 100%;
    }
    .text-block {
      width: 37.645448%;
      min-width:37.645448%;
      background: #e3e3e3;     
    }
    img {
      max-width:100%;
    }
ecm
  • 2,583
  • 4
  • 21
  • 29
Alex Mleczko
  • 1
  • 2
  • Please go read [ask] and [mre]. The minimal code to reproduce your problem, belongs directly into your question (in text form & properly formatted; as a Stack Snippet in cases where that makes sense) - and not just dumped onto some external platform (where it could disappear at any time, and thus make this question lose all value to future readers.) – CBroe Sep 01 '21 at 10:36
  • 1
    _"The height of container has to be always equal to img height."_ - so don't give the container a height then. _"Also i would like that container and img height dont't exeed 100vh when they getting bigger."_ - `max-height:100vh` for the image. – CBroe Sep 01 '21 at 10:56
  • You can catch dimension changes for any object. So whenver one object width/height changes, you can get that new value and apply to any element you want. Please check out [this answer](https://stackoverflow.com/a/19418065/3733151) for more information about how to catch dimension changes. – temo Sep 01 '21 at 11:18

2 Answers2

0

hey Alex if you want to have a responsible height use

object-fit: cover;

Heres a responsivity tutorial:

https://www.freecodecamp.org/news/css-responsive-image-tutorial/

  • Thank you for answer, i know how to make img responsive, but i want to automatically change height of container or those 2 div's that are insde and this height has to be always equal to img height that is inside – Alex Mleczko Sep 01 '21 at 10:44
0

If I correctly understand your question, you need to use flex

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #efefef;

}
h1,h2,h3 {
  margin: 0;
}
h1 {
  margin-bottom: 20px;
}

* {
  box-sizing: border-box;
}

/*Base Style*/

.container {
  display: flex;
  position: relative;
  width: 100%;
  height:100%;
  margin: 0px auto;

  
  .text-block {
    display: flex;
    flex: 1 0 30%;
    background: #e3e3e3;
    
    .text-wrapper {
      margin: 0 10%;
      overflow: auto;
    }
    
  }
  
  .image-block {}

  .image-container {
    flex: 1 1 50%;
  }       
  img {
    max-width:100%;
    max-height: 100vh;          
  }
 
}
Vito Oatmeel
  • 1