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

Html – Inserting a image in react

I download an image from flipkart as webp format. While imporing in my site, its height and width is large and it doesn’t fit in my border and width ratio. While reducing the width and height only half og the image is shown and the image is n same size. Is there any solution to How to set the image for specific border and size?

I tried to reduce the width to percent and vh and vw in css and adjust the height . The image is correctly shown only if i do the correct measurements, but that measurements was too large . I expect the image to fit the my border size without ovversizing

Tags:

3

Answers


  1. 0 
    img {width: 100%;height: 100%;object-fit: cover;}`
    Login or Signup to reply.
  2. 0

    You can achieve it by using object-fit property of CSS:

    You need to apply object-fit property to contain to ensure the entire image fits within the container.

    Reference Link: https://www.w3schools.com/css/css3_object-fit.asp

    Demo code (Might be different in your case):

    .img-container {
  width: 250px; /* Set according to your requirement */
  height: 150px; /* Set according to your requirement  */
  border: 1px solid #ccc; 
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure the image fits within the container */
}

    Let me know, if you’ve any doubts.

    Login or Signup to reply.
  3. 0

    I usually solve this problem by following two steps.

    1. Preparing the image for the size using some graphic skills.
    2. Doing some CSS tricks. An example is given below.
    .product-image-wrapper {
    width: 280px;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search