Displaying rectangular images without spacing around

Question

I am trying to display a rectangular image in html/css but the image area is being displayed as a square. Meaning that the image displays properly but there is a blank space above and below the image.

I've tried setting image height and width on the image attribute in html but still no luck.

<img src="images/countries/071-serbia.png" style="width:360px;height:240px;">

and css

img{
  display: block;
  max-width:auto;
  max-height:240px;
  width: auto;
  height: auto;
}

What am I doing wrong? Image size should be width 360 height 240.

Hey @MK , hopping in real quick to check whether I solved your issue and whether you liked my suggestion or do I need to ameliorate my skills and suggestion? — s1834, Jul 24 '20 at 13:16

score 0 · Accepted Answer · answered Jul 23 '20 at 03:22

That is because you have not done a CSS reset.

Try:

* {
  padding: 0;
  margin: 0;
}

img{
  display: block;
  max-width:auto;
  max-height:240px;
  width: auto;
  height: auto;
}

<img src="http://lorempixel.com/360/240/" style="width:360px;height:240px;">

score 0 · Answer 2 · answered Jul 23 '20 at 03:41

Try writing the attached code it will surely work and if it doesn't let me know in the comments I will try my best to help you.

I have a suggestion for you that instead of px and %, Use Viewport Units like vw for width and vh for height because it will help you make your webpage responsive.

img{
  display: block;
  max-width: 26.354vw;
  max-height: 36.529vh;
}

<!DOCTYPE html>
<html>
<head>
  <title>Images</title>
</head>
<body>
<img src="Images\sample1.jpg">
</body>
</html>

Displaying rectangular images without spacing around

2 Answers2