HTML / CSS image resize proportion

Question

I want linked images to have the size 800x600 with the original proportions. The linked images could have the site 1000x400 or for example 600x1000.

At this time I resize the image with width=800px and in the class div overflow is hidden

<div class="cut">
<img src="www.example.de/image" width=800px>
</div>

This works when the image proportion is like 600x1000, but not when it is 1000x400. How does it handle every image size?

You want to force both sizes without altering the ratio? That's not possible. — Oriol
– Oriol, Commented Feb 9, 2015 at 16:01
Tip: 800px work only in CSS, use without px in width="..." html attribute or use CSS: .cut img { width: 800px; } — Korvo
– Korvo, Commented Feb 9, 2015 at 16:01
I tested it here and it works as you are expecting it. There is probably some problem with your CSS somewhere else. — Tim
– Tim, Commented Feb 9, 2015 at 16:07
My problem is, that a image with 1000x400 will be resized to 800x320, but I want 800x600. A crop. — user3688653
– user3688653, Commented Feb 9, 2015 at 16:12

Henrique Kieckbusch · Accepted Answer · 2015-02-09 16:12:46Z

1

If you want an easier solution, change the image to background.

.image{
  float:left;
  width:800px;
  height:600px;
  border:1px red solid;
  background:no-repeat center center;
  background-size:100%;
}

Html part:

<div class="image" style="background-image:url(       
   http://www.google.com/images/srpr/logo11w.png 
);"></div>

answered Feb 9, 2015 at 16:12

1902 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chuck Le Butt · Accepted Answer · 2015-02-09 16:22:01Z

1

I believe this is what you're looking for:

.image{
    width:800px;
    height:600px;
    background:no-repeat center center;
    background-size: cover;
}

You will need to crop the images somehow, so putting them in the background makes most sense.

answered Feb 9, 2015 at 16:22

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges