How to auto-size height of text block to image next to it HTML

user_14215357 0
Viewed 424

I'm currently learning HTML and wanted to get my page to follow this format HTML Web Output

So far I was able to get the image to the correct alignment and set my width of my images to 50%. I want to have the text size next to it to match the height of the images, I saw other post that said to set the height of the text to the images height __px but I would like my height to be dynamic because depending on the window size my image height also changes how would I go about doing this on my css file. Thank you.

css html
3 Answers

Use vw when setting the height in that way when screen is resize. the height of your textbox is also resize.

Here's an example. Just adjust the value of your height in textbox that match the image height.

.text_center {text-align:center;}
.image,.text {width:33%;display:inline-block;vertical-align:top;position:relative;}
.image img {width:100%;max-width:100%;}
.text {border:1px solid #000;height:20vw;padding:20px;}
<div class="text_center">
<div class="image">
<img src="https://cc.sj-cdn.net/instructor/z6375m3nz68l-juvare/courses/6oytt1p0oah5/promo-image.1588082521.jpg">
</div>
<div class="text">
Sample Text
</div>
</div>

user_31449980

As i don't have comment option, i am adding as an answer.

  1. You can add same class as image and set the height property.

  2. You can use table also. Add a table and put all your elements in it. Set the properties.

user_57983000

easiest way is to use the css-grid. You just do a 2 column layout with 2 equal columns. The height within a row will always be the same. Full responsiveness, lowest coding efford.

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin: 10px;
}

div {
  border: 1px solid black;
  padding: 5px;
}

img {
  width: 100%;
}
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<div>Text</div>
<div>Text</div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">

user_140724200
Related