Billal BEGUERADJ Billal BEGUERADJ - 25 days ago 4x
CSS Question

increase image's width until its original one, inside a responsive DIV container

I have a container which takes 80% of the screen (responsive page).
Inside this I want to display an image which is 400 x 400 (pixels).

My goal:

  1. The screen width increases: The
    's width will increase. The image's width will increase at maximum to 400px.

  2. The screen width decreases: The
    's width will decrease. The image's width will start to decrease when the screen's width is less than 400px.

This is my JS Bin.

Any idea?


You could simply set heigth and width to 100% on your img:

.wrapper {
  width: 90%;
  height: 400px;
  border: 1px solid blue;
<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<div class="wrapper">
  <img src= "" style="width: 100%; height: 100%; max-width: 400px;">