Expanding element beyond size specified - html

Question

I have this html and this css.
.entry-content > .greyfruitdrawing {
height:2000px !important;
width:2000px !important;
margin-top:40px;
}
.redletters1 {
font-size:40px;
opacity:0.7;
color:red;
position:relative;
top: 20px;
font-weight: bolder;
line-height:1.6;
text-align:justify;
}
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/>
</div>
<div class="redletters1">SOME TEXT.</div>
The problem is that a) it won't expand by the size css is telling it to. b) elements are interacting in a way they shouldn't. Adjusting greyfruitdrawing affects position of redletters1
Site: https://4309.co.uk/about-us/

Answer 1

Set the height and width of an outer container and then give the image itself a height and width of 100%:
.container {
text-align: center;
width: 2000px;
height: 2000px;
margin-top: 40px;
}
.greyfruitdrawing img {
height: 100%;
width: 100%;
}
.redletters1 {
font-size: 40px;
color: rgba(255,0,0,0.7);
font-weight: bolder;
line-height: 1.6;
}
<div class="container">
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" />
</div>
<div class="redletters1">SOME TEXT.</div>
</div>

Answer 2

Edit
There are a few problems with what you are doing here. First off, height and width are not properties that are inherited. In your example, you are defining the height and width of the div surrounding your image in your css, not the image itself, which is why it is affecting the "position" of the red lettering. The div is getting bigger and pushing the text downwards.
Simply move the greyfruitdrawing class inside your image tag instead of your div surrounding it.
Also, it is generally bad practice to use the !important property, although I don't know what the other classes you are linking to do, so maybe they are needed to override some presets you are using.
You have many different classes and properties trying to change the size of the image. I would recommend you do something simpler.
Either change the height and width properties within the tag to match how big you want the image to be, or remove these properties and define it in your css.
Alternatively, if you want the image to fill the size of the div then I would recommend the answer by symlink.
The reason this is affecting the position of the red lettering is because you are making the div bigger, which is pushing the letters down the page. You can't see what is happening because the div is the same color as the background.
Using css to define height and width:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" class="size"/>
</div>
//notice the class is in the <img> tag and not the <div> surrounding it.
.size {
height: 2000px;
width: 2000px;
}
or defining height and width within the tag:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" height="2000" width="2000" />
</div>