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

Html – how do i fit images from an api call?

My first time posting anything here so if i am missing something please tell me! Ok, so my problem is that the images in my categories page don’t fit eachother and does not align anymore. This happened after I learned a little javascript and got the images from an API call. Now they don’t look so good anymore… especially in mobile view. How can I make it so they are all the same size? I’m totally a rookie by the way.
Here is the link to my page: https://lovely-croissant-3cceca.netlify.app/

I tried fixing it with CSS but it doesn’t "react" anymore when I change something. The mobile view in the categories page, the images are to high. But wwhen I try to lower them in the media queries the desktop version also changes. I know it likely something with the i made when I was trying out javascript. I also cant change the name "test" to something else, because the everything gets disturbed…

Tags:

2

Answers


  1. 0

    The output’s what matters, not the fact that the images are called through API, we can address the result with CSS.

    The film titles push the images down, because they are in the same container, so we have to give them a hight.

    The ratio of the images differs, so you could use object-fit: cover to crop the images at a maximum size of the smallest image’s height.

    On mobile: you need the overflow to be set to visible, and take out the padding from the .container-child too (there are multiple extra spaces otherwise), and add only to the parent.

    Something like this, would do it:

        .container-child p {
       height: 50px;
       text-align: center;
       display: block;
   }
    /*from here the responsive code*/
    @media (max-width:1624px){
        .container-child img {
          object-fit: cover;
          max-width: 500px;
          max-height: 709px; /*the smallest image*/
          width: 100%;
          height: 100%;
        }
    }
    @media (max-width: 768px) {
    .container-child {
        padding-top: 0em; 
        display: inline-block;
        text-align: center;
       }
       #test {
        margin-top: 130px;
        display: inline-block;
        text-align: center
       }
       html, body {
        overflow: visible;
        background: #000;
       }
    }
    Login or Signup to reply.
  2. 0

    It seems like you’re facing issues with the layout and alignment of the images on your categories page. I checked the provided link and I understand the problem you’re facing. The images have varying sizes, which causes misalignment and inconsistent display.

    To make the images appear the same size and aligned properly, you can use CSS to apply specific styles to the image elements. Here’s what you can try:

    1. Specify a fixed height for the image container:
    .category-card {
  height: 200px; /* Adjust the height as needed */
}

    This will ensure that all the image containers have the same height.

    1. Apply object-fit property to the images:
    .category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    The object-fit: cover property ensures that the entire image is displayed within the container without distortion, cropping the image if necessary.

    Additionally, if you want to target specific styles for mobile view, you can use media queries. For example:

    @media (max-width: 768px) {
  .category-card {
    height: 150px; /* Adjust the height for mobile view */
  }
}

    This way, you can set different heights for the image containers based on the screen size.

    Remember to apply these styles in your CSS file or within <style> tags in the HTML file.

    Regarding changing the name "test," it seems like it might be connected to the JavaScript code you mentioned. To provide more specific guidance on that, it would be helpful if you could share the relevant JavaScript code or specify which part of the page is affected when you change the name.

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

Back To Top
Search