Question

Technologies:

javascript

html

css

Tolerim

2 days ago

What is the method for adjusting images obtained from an API call to fit properly?

This is my first post here, so please let me know if I'm missing anything. Recently, I added images to my categories page through an API call using JavaScript. However, after doing so, the images no longer align properly, and their sizes don't match. This issue becomes more apparent on mobile devices. As a beginner, I'm unsure of how to fix this.

I've attempted to solve this using CSS, but it doesn't work correctly when I adjust it. Specifically, the images on the mobile view appear too high, and attempts to correct this through media queries also affect the desktop version. I suspect that the issue lies with my earlier experimentation with JavaScript, which has introduced the element with the name "test." However, I cannot change its name because it will cause other issues.

Please find the link to my page here: https://lovely-croissant-3cceca.netlify.app/

Answers(1)

Accepted Answer

It seems like the images on the categories page need to be resized to the same dimensions. You can achieve this with JavaScript or CSS. In JavaScript, you can get all the images on the categories page using document.querySelectorAll('img') and then loop through them, setting their width and height properties to the same value. Here's an example:

const images = document.querySelectorAll('img');
const imageSize = 200; // This can be adjusted to whatever size you need

images.forEach(image => {
  image.width = imageSize;
  image.height = imageSize;
});

In CSS, you can use the object-fit property to resize the images to fit within a designated container. Here's an example:

img {
  object-fit: cover;
  width: 200px; // This can be adjusted to whatever size you need
  height: 200px; // This can be adjusted to whatever size you need
}

You can add the above CSS to your existing stylesheet and adjust the width and height values to fit your needs. Additionally, you can use media queries to adjust the dimensions based on screen size.