Fixed image display style for odd shaped (very small) images.

This commit is contained in:
Jan Böhmer 2023-02-20 00:24:12 +01:00
parent f9d5a9a3b5
commit 05ab3c3b7b
4 changed files with 19 additions and 4 deletions

View file

@ -47,3 +47,18 @@
max-width: 2.0em;
object-fit: contain;
}
.part-table-image {
max-height: 40px;
object-fit: contain;
width: 100%;
}
.part-info-image {
max-height: 350px;
object-fit: contain;
}
.object-fit-cover {
object-fit: cover;
}

View file

@ -88,7 +88,7 @@ class PartDataTableHelper
'Part image',
$this->attachmentURLGenerator->getThumbnailURL($preview_attachment),
$this->attachmentURLGenerator->getThumbnailURL($preview_attachment, 'thumbnail_md'),
'img-fluid hoverpic',
'hoverpic part-table-image',
$title
);
}

View file

@ -12,7 +12,7 @@
{# @var pic App\Entity\Attachments\Attachment #}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<a href="{{ entity_url(pic, 'file_view') }}" data-turbo="false" target="_blank" rel="noopener">
<img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ entity_url(pic, 'file_view') }}" alt="">
<img class="d-block w-100 img-fluid img-thumbnail bg-light part-info-image" src="{{ entity_url(pic, 'file_view') }}" alt="">
<div class="mask"></div>
<div class="carousel-caption-hover">
<div class="carousel-caption">

View file

@ -6,10 +6,10 @@
<div class="col-md-3 col-lg-4 col-4 mt-auto mb-auto">
{% if project.masterPictureAttachment %}
<a href="{{ entity_url(project.masterPictureAttachment, 'file_view') }}" data-turbo="false" target="_blank" rel="noopener">
<img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ entity_url(project.masterPictureAttachment, 'file_view') }}" alt="">
<img class="d-block w-100 img-fluid img-thumbnail bg-light part-info-image" src="{{ entity_url(project.masterPictureAttachment, 'file_view') }}" alt="">
</a>
{% else %}
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light mb-2" alt="Part main image" height="300" width="300">
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light mb-2 " alt="Part main image" height="300" width="300">
{% endif %}
</div>
<div class="col-md-9 col-lg-8 col-7">