CODEWITHSUNDEEP
javascripthtmlcssimage
Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22784

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

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

My goal:

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

  2. The screen width decreases: The <div>'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?

Upvotes: 0

Views: 61

Answers (3)

Grey Li
Grey Li

Reputation: 12772

Try this one(IE6 support): 

.wrapper {
    width: 90%;
    height: 400px;
    border: 1px solid blue;
}

.wrapper img {
    width: 100%;
    max-width: 400px;
    width: expression(this.offsetWidth > 400 ? "400px" : "auto");
}

Upvotes: 1

Alessandro
Alessandro

Reputation: 4472

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

.wrapper {
  width: 90%;
  height: 400px;
  border: 1px solid blue;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <img src= "https://s14.postimg.org/4nu4hmvyp/8222.jpg" style="width: 100%; height: 100%; max-width: 400px;">
  </div>
</body>
</html>

Upvotes: 1

Turnip
Turnip

Reputation: 36702

You need to tell the img to take up 100% of the width of it's parent with width: 100%. The max-width will then prevent it expanding over 400px:

.wrapper {
  width: 90%;
  height: 400px;
  border: 1px solid blue;
}

.wrapper img {
  width: 100%;
  max-width: 400px;
<div class="wrapper">
  <img src= "https://s14.postimg.org/4nu4hmvyp/8222.jpg">
  </div>

Upvotes: 2

Related Questions