css Question posted in
Some basic documentation can be found here.

Css – How to make fixed width/height image responsive?

I have an image inside the card, the img has 196×196 size. On tablet its size should be 250×250. When I add mixin tablet the image doesn’t grow or scale, it just stays 196px and then when the screen is tablet width it changes to 250px. Is there a way to make it scale from 196 to 250?

&__review-card {
   padding: 32px 0;
   border-radius: 16px;
   background-color: #FFFFFF;
   box-shadow: 0 9px 18px 0 #25293108;

&__review-photo {
    margin: 0 42px;
    width: 196px;
    height: 196px;

I tried to make it into div with the background img, but it neither worked. The container resizes, but the image inside behaves the same. I tried to use calc(), but it just doesn’t work at all. I don’t know what to do, the only option is to make grid, but I don’t want to redo all my website to just make the images scale. That’s just stupid. I use flexboxes, because the website is pretty easy, just everything in one line, no extra additional things or popups. So, what should I do then? Are there any options? Because the card resizes while changing the screen width as well as the other elements inside the card, but not that stupid image (sorry, I have no words left).

Btw, width 100% and height auto also do not help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution! If anyone needs it, I post it here:

    @media (min-width: your number) and (max-width: your number) {
    width: calc(img-start-width + (img-final-width - img-start-width) * ((100vw - min-width) / (max-width - min-width)));
    height: calc(img-start-height + (img-final-height - img-start-height) * ((100vw - min-width) / (max-width - min-width)));
    margin: calc(img-start-margin + (img-final-margin- img-start-margin) * ((100vw - min-width) / (max-width - min-width)));
  }

    This will scale your image if it has fixed width and height. Feel free to use standard css to adjust the elements inside the container if needed (e.g. display flex). Also, margin formula is not exceptional. If you have different margins you'll have to use the same formula for each one using margin-top, margin-bottom, etc.


  2. 0

    I am assuming __review-photo is the class on your image. The problem is you have given it a fix width and height. You can do something like:-

    &__review-photo {
    margin: 0 42px;
    width: 100%;
    object-fit: cover;
}

    If this is not the case, please post your HTML code as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search