Как увеличить изображение, не перекрывая другие элементы?

Question

Мои изображения на рабочем столе https://adsler.co.uk/find-an-event/ плоские.Хотите увеличить их рост, чтобы они отлично смотрелись и на рабочем столе.Тем не менее, 2 балла.

Один, кажется, не может найти правильный селектор CSS.Во-вторых, кажется, не может сделать это без перекрытия других элементов.

Я просто хочу, чтобы он был выше (пропорционально, конечно)

HTML:

<form class "event_filters" id class="event_filters" >....</form>
<div class="event-listing-view-header"></div>
<ul class="event_listings event-listings-table-bordered-change 
event-listings-change" id ="event-listing-view">
<div class="line-layout" style="display: none;">
</h4><div class="boxes-view-listing-registered-code"></div></div>
<div class="events-organizer-name">....</div></div>
<div class="col-md-2">....</div>
<div class="col-md-3">....</div>
<div class="col-md-2">....</div>
<div class="col-md-3">....</div>
</div>

Пробовал css:

@media (min-width: 768px) {.box-layout.event-img img {height: 200px; width: 400px;}}

Ничего....

Answer 1

Проблема в том, что ваш селектор имеет небольшую опечатку / ошибку. Изменить это:

.box-layout.event-img img { ... }

к этому:

.box-layout .event-img img { ... }

Первый ищет изображение внутри элемента с классом box-layout AND event-img. Вы хотите изображение внутри элемента с классом event-img, который находится внутри элемента с классом box-layout. Пространство между классами селектора имеет все значение.

Answer 2

Трудно точно сказать, что вы ищете, но я бы попробовал что-то вроде этого:

Использование селектора css .box-layout .event-img img и object-fit:cover для предотвращения искажения изображений.

@media (min-width: 768px) {
  .box-layout .event-img img {
    height: 200px;
    width: 400px;
    object-fit: cover;
  }
}

Редактировать: чтобы исправить наложение текста и изображения, вам нужно удалить высоту для .box-layout .event-img селектора (или переопределить их, если у вас нет доступа к изменению)

.box-layout .event-img {
    display: table-cell;
    /* height: 100px; */
    /* max-height: 100px; */
    text-align: center;
    vertical-align: middle;
    width: 100%;
    float: left;
}

Чтобы переопределить CSS, вы можете добавить:

.box-layout .event-img { 
  height: initial; 
  max-height: initial; 
}

Это необходимо добавить в таблицу стилей (или на страницу) после включения на страницу frontend.min.css.