Resize Images CSS/HTML

Question

Imagine websites like 9Gag. You upload an image and they display it always with the same width and only the height changes.

How can I achive this? I cant even resize my images hardcoded.

CSS:

.post img{
height: 200px;
width: 300px; 
}

HTML:

<div class="post">
  <img src="img/bf1.jpg">
</div>

The image stays the same size.

Answer 1

Have you tried:

<div class="post">
  <img height="200px" width="300px" src="img/bf1.jpg">
</div>

Hope this helps!

Answer 2

You should change CSS style to:

.post img{
  height: auto;
  width: 300px; 
}