来自画廊的图像以不同的屏幕尺寸裁剪或消失

问题描述

首先，我不是网页开发人员，也不是网页设计师。只知道如何使用 wordpress 主题和很少的 css 修改。很抱歉我说了些愚蠢的话。

我正在使用叙事应用程序来制作一些图片库。因此，您以一种非常酷的方式在他们的应用中上传照片，然后他们会创建一个链接以粘贴到 html 文本块中。

那么，问题来了。在某些屏幕（如 Mac 27"）中，一些图像被裁剪，如果您手动减小屏幕尺寸，您甚至可以看到一些图片开始变小并且消失。如果您在某些屏幕上刷新，这看起来不错，但在其他情况下imac 27" 某些图像仍会出现裁剪。

你可以在这里看到： https://frandeprado.com/prueba-dosmasenlamesa（我正在测试，所以我不知道您会看到什么，但我想您可能知道问题出在哪里）。

我尝试了这个 css，所以这使得图像不会被裁剪，但它们的酷对齐消失了。我喜欢一些图片在顶部对齐的方式，其他的底部对齐，其他的左..右..等（你可以在链接中看到）

.nar-block {
    xbackground-position-x: center !important;
    xbackground-position-y: center !important;
    }

这是实际的 CSS，没有对其中一张照片进行任何修改

.nar-block-7N8412fP7TJ5YCUY1 {
  margin-left: 0 !important;
  margin-right: 15px !important;
  margin-top: 51px !important;
  margin-bottom: 15px !important;
  opacity: 0 !important;
  transition: margin-top 0.8s,opacity 1s;
  cursor: pointer;
  padding-top: 44.447659697605445% !important;
  flex: 0.2963177313173696 !important;
  background-size: 60.59951186180115% auto;
  background-position-x: 58.02273236020537px;
  background-position-y: 67.15377749249006px;
}

我在 css 中看到过一些叫做 flex 的东西，但我什至不知道它是如何工作的。当我在 google 控制台中取消选中其中的一些时，我看到了一些变化..但正如我们在西班牙所说，这对我来说听起来很中国..

所以我希望你能用一个简单的解决方案来帮助我解决这个问题。

非常感谢

解决方法

你的插件有非常糟糕的、大的、完全不必要的有毒代码。如果您对这个丑陋的代码感到满意。然后你可以做一个简单的css解决方案：

.wpb_wrapper img.nar-block  {
        background-size: cover !important;
        background-position: center !important;
}

image-gallery styles wordpress wordpress