Question 301457 in Html Question posted in
Some basic documentation can be found here.

Html – How can i make the images smaller without losing quality?

.review {
        display: flex;
        flex-direction: row;
        border-radius: 55;
}

This is how I have my code right now. I need help making all 3 images smaller without losing quality. Every time I add width and height to .review img, it squishes my images, and the last image disappears.

Tags:

3

Answers


  1. 0

    It would help if you considered using the CSS max-width property. Setting max-width will ensure that the images don’t exceed a certain width while maintaining their aspect ratio. Here’s an example:

    .review {
    display: flex;
    flex-direction: row;
    border-radius: 5px;
}

.review img {
    max-width: 100%;
    height: auto;
}

    In this example, I added a style for the .review img selector. The max-width: 100%; property ensures that the image won’t exceed its natural width, and the height: auto; property maintains the aspect ratio, preventing squishing.

    You can adjust the border-radius and other styles according to your design requirements. The border-radius property should have a unit, such as px for pixels.

    Ensure you have appropriate values for the border-radius and other styles based on your design needs. The key here is using max-width to control the size of the images while preserving their quality.

    Login or Signup to reply.
  2. 0

    To make images smaller without losing quality, you can use the CSS max-width property to limit the maximum width of the images while maintaining their aspect ratio. This way, the images will be responsive, and the quality won’t be compromised.

    Here’s an example of how you can modify your CSS code:

    .review {
    display: flex;
    flex-direction: row;
    border-radius: 55;
}

.review img {
    max-width: 100%; /* Set the maximum width to 100% of the container */
    height: auto;    /* Allow the height to adjust proportionally */
}

    In this example, I’ve added a selector for .review img to target all images inside the .review container. The max-width: 100% ensures that the images won’t exceed the width of their container, and height: auto maintains the aspect ratio.

    Now, when you add this to your existing code, it should help make the images smaller without losing quality:

    .review {
    display: flex;
    flex-direction: row;
    border-radius: 55;
}

.review img {
    max-width: 100%;
    height: auto;
}

    Adjusting the max-width property allows you to control how much smaller you want the images to be while ensuring they remain responsive and maintain their quality.

    Login or Signup to reply.
  3. 0

    You should specify the width or height while maintaining the aspect ratio and set a unit for the border-radius property.

    .review {
    display: flex;
    flex-direction: row;
}

.review img {
    width: 100px;
    height: auto; 
    border-radius: 5px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search