0

我正在（曾经）寻找一种方法，让我的图像尽管有身体填充，但仍然是全宽的。而且，我希望我的图像也不会太高。

使事情变得更加困难，（a）所有图像都存在于标签内，<p>我不能（轻松）为它们分配类等。那是因为页面是从 Markdown 转换生成的，我想避免应用大量的正则表达式（尽管如果需要我愿意）。

要求基本上是在正文内填充文本（但不是通过p边距，所以我不必处理非段落元素）。而且，我希望最大高度是当前宽度的某个百分比。最后，除了尽量避免触碰HTML之外，如果可以的话，我也不想添加任何js。

4

1 回答 1

1

以下是我的解决方案。它仍然需要一些修补，因为您可以在使用方形图像限制宽度之前成为高度限制，但如果没有别的，这只是一个开始。同样，这对于那些更有经验的人来说可能是非常明显的。

定义以下

  • $pad作为身体的填充物 ( 2em)
  • $body_width为 body 元素的宽度 (900px
  • $mh是设置最大高度的分数。同样，这是您关心的图像类型的个人偏好。我会0.9在这个例子中做。
body {
  margin: 1em auto auto;
  max-width: 900px; /* $body_width */
  padding: 0.1em 2em 2em; /* $pad $pad */
}

video,img{
    border: 0;
    max-width: calc(100% + 4em); /* + 2*$pad */
    max-height: 810px; /* $mh * $body_width 
    display: block;

    /* From [1] */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

[参考1]

但我也想处理宽度小于最大（即移动）的高屏幕。

@media only screen and (max-width : 900px) { /* $mh*$body_width */
   img,video {
        max-height: 100vw;
    }
}

它的工作原理是首先使图像最大宽度超出填充，然后使用transform它来居中。

我希望这对将来的某人有所帮助。它本可以为我节省一天的时间！

于 2019-10-06T06:12:21.023 回答