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

很难准确说明您要寻找什么，但是我会尝试这样的事情：

使用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;
}

Answer 2

问题是您的选择器有一个小的错字/错误。更改此：

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

对此：

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

第一个是在元素内的类box-layout和event-img中查找图像。您想要在类event-img的元素内部的图像在类box-layout的元素内部。选择器类之间的空格使所有不同。

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

2 个答案: