Height and width of image won't change in CSS - html

Question

Trying to alter an image to display alongside another div containing text and have been at it for hours to no avail. The image is supposed to show in line with the other div but refuses to do so:
<div id="leftimg">
<img src ="SLL/student.jpg"/>
</div>
First attempt:
#leftimg {
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
}
Second attempt:
#leftimg {
max-width: 100%;
height: auto;
left: 0px;
right: 0px;
}
Third attempt:
#leftimg {
width: 500px;
height: 500px;
}

Answer 1

It looks like you're selecting the div element in your CSS, instead of the image. If you'd like to apply those rules to the image inside the div you'll need to follow the div's ID with img like this:
#leftimg img{
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
. . .
}
Here's a full example:
#leftimg img{
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
/* Added to make the text wrap around the image
feel free to ignore if that's not how you want
it to work */
float:left;
padding:10px;
}
/* Added to clear the float used above - if you leave
out my stuff above, then leave this out too */
#leftimg:after{
content:'';
clear:both;
}
<div>
<div id="leftimg">
<img src="https://pixabay.com/static/uploads/photo/2015/09/22/15/02/studying-951818_640.jpg"/>
</div>
<h3>Student Letting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt turpis in magna imperdiet dapibus. Nullam eu neque vel augue rutrum euismod. Sed egestas purus blandit leo rhoncus, sit amet egestas sapien lobortis. Aliquam placerat nec diam id tincidunt. Phasellus in mollis arcu. Aliquam venenatis, est ac pharetra semper, magna libero euismod sem, ac molestie leo ex sed nunc. In ullamcorper orci in dapibus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam posuere venenatis finibus. Vestibulum orci metus, auctor eu nisi in, suscipit viverra erat. Vivamus purus magna, porta auctor urna eu, venenatis mollis leo.</p>
<p>Duis justo magna, hendrerit ut tortor eu, ornare viverra mi. Ut ultrices gravida arcu, nec tincidunt nulla vehicula in. Pellentesque varius nulla ligula, quis convallis felis blandit at. Nam sit amet lobortis dui, et imperdiet orci. Donec malesuada enim nec tellus auctor accumsan. Nam vehicula felis nec dolor facilisis, vel dapibus dui scelerisque. Donec quis nunc venenatis, laoreet est ac, condimentum arcu. Quisque ut luctus felis. Nulla commodo auctor risus a ullamcorper. Curabitur bibendum tincidunt ante a porta. Ut ut orci ut nulla tempor ornare.</p>
</div>
But if you want to have multiple images inserted into a page with this style you really should use a class instead of an ID, like this:
.leftimg img{ /* Notice how we use the class selector instead */
max-width: 50%;
height: inherit;
left: 0px;
right: 0px;
/* Added to make the text wrap around the image
feel free to ignore if that's not how you want
it to work */
float:left;
padding:10px;
}
/* Added to clear the float used above - if you leave
out my stuff above, then leave this out too */
.leftimg:after{ /* And again here we use the class selector instead */
content:'';
clear:both;
}
<div>
<div class="leftimg"> <!-- Notice id is changed to class -->
<img src="https://pixabay.com/static/uploads/photo/2015/09/22/15/02/studying-951818_640.jpg"/>
</div>
<h3>Student Letting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt turpis in magna imperdiet dapibus. Nullam eu neque vel augue rutrum euismod. Sed egestas purus blandit leo rhoncus, sit amet egestas sapien lobortis. Aliquam placerat nec diam id tincidunt. Phasellus in mollis arcu. Aliquam venenatis, est ac pharetra semper, magna libero euismod sem, ac molestie leo ex sed nunc. In ullamcorper orci in dapibus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam posuere venenatis finibus. Vestibulum orci metus, auctor eu nisi in, suscipit viverra erat. Vivamus purus magna, porta auctor urna eu, venenatis mollis leo.</p>
<p>Duis justo magna, hendrerit ut tortor eu, ornare viverra mi. Ut ultrices gravida arcu, nec tincidunt nulla vehicula in. Pellentesque varius nulla ligula, quis convallis felis blandit at. Nam sit amet lobortis dui, et imperdiet orci. Donec malesuada enim nec tellus auctor accumsan. Nam vehicula felis nec dolor facilisis, vel dapibus dui scelerisque. Donec quis nunc venenatis, laoreet est ac, condimentum arcu. Quisque ut luctus felis. Nulla commodo auctor risus a ullamcorper. Curabitur bibendum tincidunt ante a porta. Ut ut orci ut nulla tempor ornare.</p>
</div>
Doing it with a CSS class would let you have several images on the same page using the same styling, without having to repeat your code. If you're only going to have one image it may be more beneficial to leave it as an ID though. It just depends on how you're going to be using this.

Answer 2

Give the image element an id and set the width/heigth of it:
HMTL:
<img id="img" src ="SLL/student.jpg"/>
And in your CSS File
#img{
width: 500px;
height: 500px;
}
Or set a background to the div
#leftimg {
background-image: url("SLL/student.jpg");
}

Answer 3

You can do it like this:
#leftimg img {
width: 500px;
height: 500px;
}

Answer 4

Try this
#leftimg img {
width: 500px;
height: 400px
}
If you want to change dimensions of your image, change to image itself, not the to image wrapper

Answer 5

try
img{
width:100%;
display: table-cell; /* to give the img full height */
}