How to adapt images in api calls?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to adapt images in api calls?

P粉138871485 2023-09-05 13:36:09

396

This is my first time posting anything here, so if I'm missing something, please let me know! Ok, so my problem is that the images in the category page don't fit with each other and no longer line up. This happened after I learned a little JavaScript and getting images from API calls. Now they don't look that good anymore...especially in mobile view. How can I make them the same size? BTW, I'm a complete noob. Here is the link to my page: https://lovely-croissant-3cceca.netlify.app/

I tried fixing it with CSS, but it no longer "reacts" when I change something. Mobile view in category page, image too tall. However, when I try to lower them in the media query, the desktop version also changes. I know this is probably something I'm doing when I'm experimenting with javascript. I also can't change the name "test" to something else because everything will be disrupted...

P粉138871485

reply all (1)

P粉8484421852023-09-06 00:20:41 1 floor

The important thing is the output, instead of calling the image via API, we can use CSS to handle the result.

The movie title pushes the images down because they are in the same container so we have to give them height.

The images have different proportions, so you can useobject-fit: coverto crop the image at the maximum size with the minimum image height.

On mobile: You need to setoverflowtovisibleand remove thepaddingchildfrom.container- too True (otherwise there would be multiple extra spaces) and only added to the parent.

Something like this would be done:

.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; } }