CODEWITHSUNDEEP
htmlcss
Artjom Prozorov
Artjom Prozorov

Reputation: 193

Auto-resizing div and its content

I am trying to achieve auto resizing in my div parent block. I would like my image to resize to an exact div block width or even better if text would resize image and changes div block width so that page look neat.

    <body style="margin: auto;max-width: 800px">

<div class="messages" style="color: #002b55;max-width:100%;height: auto;font-size: 11px">
    <img src=cid:header.png alt="header">
    <div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>

for example if the image is bigger than text i would like my image to resize to the longest line

enter image description here

Upvotes: 1

Views: 1761

Answers (1)

John
John

Reputation: 5335

You can have images and divs resize using display: flex; Also you can have your text change size using vw instead of px such as font-size:5vw; which is in relation to the size of the view window.

Check out what I did here. And here is the jsfillde for you to play around with the window size. https://jsfiddle.net/dcxp0uqe/

.messages {
  width 50%;
  height 50%;
  display: flex;
  font-size:5vw;
}

.messages * {
  display: flex;
  width: 50%;
  height: 50%;
}
<body style="margin: auto;max-width: 800px">

<div class="messages" style="">
    <img src="https://w3schools.com/html/img_girl.jpg" alt="header">
    <div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>
    </div>

Upvotes: 2

Related Questions