html - 如何在不重叠其他元素的情况下放大图像？

Question

桌面 View 中的我的图像 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

很难准确地说出你在找什么，但我会尝试这样的事情:

使用 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 之后添加到样式表(或页面上)。