I have a article next to my image, but I want my article to grow if my image grows too. So if anybody would shrink or grow his window, the image would do the same, but the article wouldn't. How can I fix that my article would shrink/grow too like my image?

Here is my HTML

 <div id="begin">
    <article id="inline">Hello guys</article>
    <img id="an" src="/Photo/an.jpg">
 </div>

Here is my CSS

#begin {
  width: 100%;
  height: ;
  position: relative;
}

#inline {
  display: inline-block;
}

CodePudding user response：

Use display: grid, and add a two column page, where the first column have a fixed width (30 characters in the code below), and the second column has the width of 1fr, i.e. one fraction, to fill up the rest of the available space.

#begin {
  display: grid;
  grid-template-columns: 30ch 1fr;
}

#begin > img#an {
  width: 100%;
}

<div id="begin">
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tortor iaculis, ullamcorper felis ut, porttitor mauris. Maecenas blandit dictum rutrum. Donec justo enim, rhoncus sagittis ipsum ut, tincidunt dignissim turpis. Donec sed aliquet velit. Sed egestas egestas risus. Ut a ullamcorper nibh. Suspendisse tincidunt gravida quam quis vehicula. Donec faucibus diam sit amet ligula condimentum eleifend. Nunc in nulla non tellus vehicula maximus vitae sed purus. Cras mollis leo ex, sit amet tempus orci luctus ac. Fusce elementum pulvinar lacus, eu luctus justo tincidunt sed. Pellentesque in feugiat dui. Suspendisse id maximus lacus.</p>

    <p>Fusce tempus faucibus lacus, et aliquet metus eleifend et. Aliquam eget nulla sed ligula ornare ultricies. Proin neque purus, vehicula id ultrices sed, pharetra sed odio. Duis non odio tincidunt, euismod est eu, sollicitudin ante. Cras eu arcu dui. Donec id pulvinar dolor. Donec lobortis malesuada convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Integer et feugiat ligula. Integer fermentum consequat lorem. Etiam malesuada ut nulla vel dapibus. Vestibulum id nunc dictum, tincidunt urna at, finibus dolor. Nam tristique posuere aliquam. Nullam ut ipsum eget dolor lacinia placerat. Duis vulputate congue libero vitae sagittis.</p>

    <p>Integer iaculis nisi sodales finibus consequat. Curabitur pellentesque sollicitudin hendrerit. Nulla vel ipsum fringilla dui sodales mollis eu sed urna. Donec rhoncus, lacus nec viverra dignissim, arcu mi fringilla diam, a aliquet justo enim id risus. Sed ultricies vehicula lacinia. Pellentesque vitae velit rhoncus magna volutpat vulputate sed vitae dui. Integer ultricies orci nec urna cursus, sed pretium mi euismod. Ut ultrices blandit quam at blandit. Phasellus elementum justo urna, varius finibus augue sagittis ac.</p>
  </article>
  <img id="an" src="https://picsum.photos/200/300">
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use

@media screen and (max-width: /* value */px)

in css to change, hide things on smaller/larger screens. I recommend visiting this site: https://www.w3schools.com/css/css3_mediaqueries_ex.asp for more information. (if this is what you meant)