Having trouble with the scraping of some divs as they are not wrapping properly within my container
Your HTML:
<div class="anime-list">
{% for anime in response_data %}
<div class="anime-item">
<div class="anime-cover" style="background-image: url({{ anime['cover'] }});" alt="">
</div>
{% endfor %}
</div>
Here is your CSS:
.anime-list {
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: #eee;
}
.anime-item {
background-color: #000;
}
.anime-item div {
width: 208px;
height: 296px;
border-radius: 10px;
border-color: white;
border-style: solid;
background-size: cover;
}
The final result looks like this:
<div class="anime-list">
<div class="anime-item">
<div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/4991.jpg);" alt="">
</div>
<div class="anime-item">
<div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/4937.jpg);" alt="">
</div>
<div class="anime-item">
<div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/5009.jpg);" alt="">
</div>
</div>
However, it seems distorted and not aligned correctly like shown in this image https://i.sstatic.net/w6sHPm.jpg
Do you have any suggestions on how to fix this issue? I have already tried using flex-direction: row;
, flex: 1 1 0;
, display: inline-flex;
. While using an img tag works, I need to maintain the image in a div to avoid distortion when resizing.