如何在wordpress中修复图片截断问题？

Question

我设置了各种图片作为特色图片，但是图片被截断了，如何实现整个图片的展示？

这是我的网站https://www.herbalcity.co/

Images getting cut-off example

我使用了以下css：

​

.preloader .full-width {

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.full-width {

    min-width: 100%;
}
img {
    border: 0;
}
img {
    display: inline-block;
    color: transparent;
    height: auto;
    font-size: 0;
    vertical-align: middle;
    max-width: 100%;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: auto;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

​

Answer 1

您可以使用object-fit缩小图像，使其始终完全可见。一些参考：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

Answer 2

我已经解决了这个问题。这个问题不能用CSS解决，因为CDN在显示之前切断了图像，所以CSS帮不上忙。

我现在正在使用另一个插件的不同布局，现在它可以工作了。