Responsively resize an image using CSS3, relative to the width of its parent element, without exceeding its original size

Question

I started building a Tribute page on CodePen.io, followed the user stories and got 9 out of 10 of the tests. I've been stuck on resizing the image using CSS3. I googled, tried the answers but none worked for me. The CSS code is :

#img-div {
   text-align: center;
   display: block;
   filter: grayscale(100%);
   width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

Here is the link to the CodePen page https://codepen.io/dansia/pen/NWxNMJP look at it and help me solve this challenge.

If you want to make the image responsive with a maximum width then you have to define both `width` and `maximum-width` on the `img` element. E.G., `img { width: 100%; maximum-width: 330px }` — charles, Jun 16 '20 at 17:45
No you don't need both. you only need `max-width` and the image will grow to its natural width as max. Look at [this jsfiddle](https://jsfiddle.net/MilkyTech/huygs61p/). Is that what you are looking for? — MilkyTech, Jun 16 '20 at 17:49
Does this answer your question? [CSS image max-width set to original image size?](https://stackoverflow.com/questions/24197730/css-image-max-width-set-to-original-image-size) — disinfor, Jun 16 '20 at 18:00

score 3 · Answer 1 · edited Aug 03 '21 at 12:29

3

I used this to get the image to the center and to make it relative to the width of the parent.

#image {
    display: block;
      
    max-width: 100%;
    
    margin-left: auto;
    
    margin-right: auto;
    
}

You can also use width: 100%; to make the image bigger so it's in the center of the page, but that way you just fool the program, which is not fair.

edited Aug 03 '21 at 12:29

Adrian Mole

49,934
160
51
83

answered Aug 02 '21 at 19:25

Pkazakov

31
2

score 1 · Answer 2 · edited Jan 03 '21 at 09:20

1

I used this:

#image {
  width:100%;
  height:auto;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

edited Jan 03 '21 at 09:20

Pang

9,564
146
81
122

answered Jan 03 '21 at 08:51

c_dutta

11
1

score 0 · Answer 3 · answered Jun 16 '20 at 18:05

0

Have you tried to call it from your div?

#img-div {
   text-align: center;
   display: block;
   filter: grayscale(100%);
   width: 100%;
}

#img-div img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

<div id=“img-div”>
 <img href=“something”/>
</div>

answered Jun 16 '20 at 18:05

Maciej Gromadzki

131
8

Then if you want your picture to resize make your width smaller but in image container which is #img-div. – Maciej Gromadzki Jun 16 '20 at 18:09

score 0 · Answer 4 · answered Jun 17 '20 at 21:24

I added margin-left (auto), margin-right (auto) and display (block) to img element and it worked for me. Finally got the 10/10.

The whole code is then :

#img-div {
  text-align: center;
  display: block;
  filter: grayscale(100%);
  width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

Thank you for your suggestions.

score 0 · Answer 5 · answered Sep 08 '20 at 10:50

the command

    image { 
   max-width: 100%; 
   height: auto;
}

is usually enough. but the way that codepin tests for the code is searching for both width and max-width

however, people were saying that you should specify max-width to 330. I simply didn't know how to acquire the information that this image has this width so I had to figure out another way. so here it is (and it passed the test):

  #img-div{
  background-color: white;
}

  #image {
  max-width: 100%;
  width: 100%;
  display: block;
  height: auto;
  }

you can check it in my codepin project here: https://codepen.io/asserelfeki/pen/LYNOEVJ

score 0 · Answer 6 · answered Apr 08 '21 at 16:29

I've been doing the same project.

#img-div {
    margin: auto;
    width: 97%;
    padding-bottom: 10px;
}

#image {
    max-width: 90%;
    display: block;
    margin: auto;
}

Why 90%? As for the challenge, we don't want the image to take the full width of the container. After adding these properties, no matter how much I resize my page, the image will not exceed the container, it will be responsive

score 0 · Answer 7 · answered Apr 30 '21 at 17:09

0

This is what i did

 #img-div {
  text-align: center;
  display: block;
  filter: grayscale(100%);
  width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

answered Apr 30 '21 at 17:09

CormacDon108

11
2

score 0 · Answer 8 · answered Aug 14 '21 at 04:42

0

#img-div {
  position: relative;
  height: 500px;
  width: 500px;
}
#image {
  position: absolute;
  max-width: 100%;
}

answered Aug 14 '21 at 04:42

Samarjit Swain

1

1

Consider adding an explanation of how your code answers the question, as code-only answers are less useful. Especially when there are other, previous answers, it is good to explain how your answer differs from or improves on the others. – rmlockerd Aug 14 '21 at 05:43
You can even add comments to your code for better understanding. – Kundan Aug 14 '21 at 18:39

score 0 · Answer 9 · answered Dec 09 '21 at 10:07

0

Please try this code for your reference

img
{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

answered Dec 09 '21 at 10:07

Jin

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 09 '21 at 10:15

Eyob Eshetu · Answer 10 · 2022-09-08T18:09:52.853

0

This is the Solution:

#image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}

edited Sep 08 '22 at 18:09

answered Sep 08 '22 at 18:09

Eyob Eshetu

1
1

score -1 · Answer 11 · answered May 18 '21 at 15:24

-1

#img-div{  
  width: 50%; <!--depends on the image resolution and its appearance in the page-->
  background: white;
  margin: auto; <!--centering the image-->
  padding: 15px;
}

#image{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

answered May 18 '21 at 15:24

YOKITH SURYA M

1

While this code may answer the question, it's generally useful to add some context around the code to make this answer more helpful. – 10 Rep May 19 '21 at 00:36
Check https://stackoverflow.com/questions/18113056/make-images-scale-to-parent-div-only-when-larger-all-while-using-an-explicit-ma – Steve Maris May 19 '21 at 12:12

Shivansh The Amazing · Answer 12 · 2020-06-16T17:42:18.230

-2

This link contains what you should need: https://www.freecodecamp.org/forum/t/tribute-page-responsively-resize-img-relative-to-parent-element/203586

Code in case link doesn't help:

#image {
max-width: 250px; <!--Base width-->
width: 100%; <--Size according to parent use percentage-->
display: block;
margin: auto; <!-- center the image -->

}

edited Jun 16 '20 at 17:42

answered Jun 16 '20 at 17:39

Shivansh The Amazing

1
2

1

This belongs in a comment. It does not specifically resolve his issue. – MilkyTech Jun 16 '20 at 17:40
@ShivanshTheAmazing thank you for sharing the link. I copied a code there that worked for me. – Dansia Jun 17 '20 at 21:43

score -2 · Answer 13 · edited Nov 24 '21 at 10:17

-2

try this i thing this is help ful for you....

@media (min-width:500px) {
  /*Class name*/ {
    /*properties*/
  }
}
@media (max-width:499px) {
  /*Class name*/ {
    /*properties*/
  }
}

edited Nov 24 '21 at 10:17

Fabian S.

2,441
2
24
34

answered Nov 23 '21 at 09:32

Saurabh Dhumane

3
2

Responsively resize an image using CSS3, relative to the width of its parent element, without exceeding its original size

13 Answers13