Есть такие карточки с картинками
хочу что- бы содержимое карточки выравнивалось по ширине картинки, что бы не было белого пространства между рамкой и картинкой, как это сделать? Сейчас код такой
<div class="card-columns">
{% for product in products %}
<div class="card">
{% if product.image %}
<div class="img-wrap">
<img style="max-width: 360px;" src="{{ product.image.url }}" alt="тут малоб бути зображення" /> <br/><br/>
</div>
{% endif %}
<div class="card-body">
{% if user.is_authenticated %}
<div style="text-align: center;">
<a style=" color: black; margin-right: 5px; " href="{% url 'product_edit' pk=product.pk %}">
<i class="fas fa-pencil-alt"></i></a>
<a style=" color: black;" href="{% url 'product_remove' pk=product.pk %}"><i class="far fa-trash-alt"></i></a>
</div>
<br><br>
{% endif %}
<h2 class="posts-post-title"> {{product.name }} </h2>
<p class="card-text">{{product.description|linebreaksbr|truncatewords_html:20 }}</p>
<p class="card-text"> <a href="{% url 'product' pk=product.pk %}"><p>Переглянути</p></a></p>
<button style="background-color: white; border: none;" type="submit" class="button"><i style="color:#f76a6a; font-size: 20px" class="fas fa-heart basket_add_pr" data-product_name="{{product.name}}" ></i></button>
</div>
</div>
{% endfor %}
</div>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
.img-wrap{
display:block;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: auto;
margin: auto;
}
Простой
