When setting the width in CSS you must specify a unit. So instead of width: 200 you need to use width: 200px. The px stands for pixel.
Alternatively, you can try setting the image width to 100%.
Solution 1 :
Solution 2 :
If you have fixed your wrapper(root) element width then try to use width:100% for inside element like- for image tag so that i could adjust as per your devices width.
<img src="123.jpg" style="width:100%;">
Solution 3 :
You can set this image is background of the div, and use “background-size: cover;”
Problem :
How do I fit the image in the cell?
I want to fit the entire image in the yellow part
Below is my code.
<!--Top Part-->
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 770px; height:270px; display: table-cell; background-color:#B2BABB;">
<p style="font-family: Allerta Stencil; font-size:40px; color:red; padding-top: 65;
padding-left:120;">SCOPE<br>Industries Berhad<br>
<span style="font-size:25px; color:black; font-family: Allan;">
A simple solution,<br></span>
<span style="font-size:25px; color:black; font-family: Allan; padding-left: 135;">
for a complex problem.</span></p>
</div>
<!-- Slideshow -->
<div style="display: table-cell; background-color:#F7DC6F ">
<img src="123.jpg" style="width:200;">
</div>
<!-- Slideshow End -->
Comments
Comment posted by Ng Wei Shen
I added the px but now that part is going over the footer part
Comment posted by Pablo
@NgWeiShen If the picture is going beyond the container boundaries is because the image and the container have different aspect ratios. You can try setting the image
Comment posted by Ng Wei Shen
Ah ok, I found out the problem. I put the footer inside the body. But right now everytime I enlarge the image, the table will become bigger