更新

Question

我有两列，都是屏幕宽度的50％。左列填充文本，右列填充图像，缩放到文本的高度。另一幅图像放在第一张图像上，位于右下角。即使屏幕宽度超出图像宽度（图像右侧出现空白），第二张图像也应与第一张图像的右下角保持对齐。

您可以在下面的代码中看到的设置适用于Firefox以外的浏览器。在Firefox中，第二个图像尽可能位于最右侧，直到第一个图像的原始宽度。我想我已经将它缩小到我给.image div的100％高度，如果我使用固定高度（即400px），则第二张图像正确对齐。我需要百分比高度，让第一个图像缩放到文本高度。

.wrapper {
  overflow: hidden;
  position: relative;
}

.text {
  width: 50%;
  position: relative;
}

.image {
  width: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
}

.image div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.image div:after {
  content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 120px;
}

.image>div>img {
  display: block;
  height: 100%;
  width: auto;
}

<div class="wrapper">
  <div class="text">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
      tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
      lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
      imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>

    <p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
      aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
    <p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
      aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
  </div>
  <div class="image">
    <div>
      <img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
    </div>
  </div>
</div>

您可以在Codepen中看到它的工作原理。

任何帮助都将不胜感激。

Answer 1

它必须是firefox上的一个bug。您的代码似乎在1170px下运行。所以我想出了一个快速修复，我不知道它是否适用于你的情况。

CSS：

＆＃13;

<div class="tabs-wrapper">
  <input id="tab1" type="radio" name="tab" checked>
  <input id="tab2" type="radio" name="tab">
  <input id="tab3" type="radio" name="tab">
  
  <div class="tabs">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2, which is longer</label>
    <label for="tab3">Tab 3</label>
  </div>

  <div class="tabscontent">
    <div class="tabcont1"><span>Content 1</span></div>
    <div class="tabcont2"><span>Content 2,<br>with 2 lines</span></div>
    <div class="tabcont1"><span>Content 3</span></div>
  </div>
</div>

＆＃13;

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


.wrapper {
  overflow: hidden;
  position: relative;
  max-width: 1170px;

  margin-left: auto;
  margin-right: auto;
}

.text {
  width: 50%;
  position: relative;
}

.image {
  width: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
}

.image div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.image div:after {
  content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 120px;
}

.image>div>img {
  display: block;
  height: 100%;
  width: auto;
}
.big-wrapper {
  margin-left: auto;
  margin-right: auto;

}

＆＃13;

Answer 2

更新

第二个版本Demo 2已被剥离所有flex，fixed位置，甚至内在测量（vw）。 Firefox工作甚至IE令人惊讶。更改了背景颜色，使其看起来更加宽松。

主要变更

已添加html,body {height:100%;width:100%}
.wrapper也需要100x100％。
现在.image和.text的父级百分比可以与之相关。
给予.image min-height:100%
删除了<img>并使用了background-image

可选更改

制作.wrapper position:fixed
制作.text和.image position:absolute
.wrapper是一个灵活容器
.wrapper有overflow-y:scroll因此，在宽度较小的情况下，仍然可以读取文字，而scroll代替auto，因此滚动条时没有跳跃行为弹出进出。
我还将Marv编辑为具有透明背景的PNG。不包括P38调制器。

演示1

html,
body {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.text {
  position: absolute;
  max-width: 49vw;
  left: 0;
  top: 0;
  bottom: 0;
  word-break: break-word;
  margin: 0 10px 0 0;
  padding: 10px;
  flex: 0 1 auto;
}

.image {
  min-width: 49vw;
  min-height: 100%;
  position: absolute;
  background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
  background-size: cover;
  right: 0;
  bottom: 0;
  top: 0;
  flex: 1 0 auto;
}

.marv {
  background: url("https://image.ibb.co/h1pCQy/marv.png");
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 120px;
}

<!doctype html>
<html>

<head>
  <style>

  </style>
</head>

<body>
  <div class="wrapper">
    <div class="text">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
        tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
        lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
        imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>

      <p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
        interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
      <p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
        interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
    </div>
    <div class="image">
      <div class='marv'></div>
    </div>
  </div>

</body>

</html>

演示2

html,
body {
  height: 100%;
  width: 100%;
  background-color:#000;
  color:#fff
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.wrapper {
  height: 100%;
  width: 100%;
}

.text {
  position: absolute;
  max-width: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  word-break: break-word;
  margin: 0 10px 0 0;
  padding: 10px;
}

.image {
  min-width: 50%;
  min-height: 100%;
  position: absolute;
  background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
  background-size: cover;
  right: 0;
  bottom: 0;
  top: 0;
}

.marv {
  background: url("https://image.ibb.co/hioYDJ/marv.png");
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 120px;
}

<!doctype html>
<html>

<head>
  <style>

  </style>
</head>

<body>
  <div class="wrapper">
    <div class="text">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
        tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
        lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
        imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>

      <p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
        interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
      <p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
        interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
    </div>
    <div class="image">
      <div class='marv'></div>
    </div>
  </div>

</body>

</html>

Answer 3

您可以在CSS下面添加此代码以修复Firefox。但只有在图像宽度没有调整时才会出现这种情况。所以你可以和@media混合使用。

@-moz-document url-prefix() {
        .image div {
            display: ruby-base;
        }
        .image div:after {
            overflow: hidden;
        }
    }

Answer 4

我检查了您的代码，请替换下面的图片样式规则：

.image > div > img {
    display: block;
    height: 100%;
    width: 100%;
}

遵循以下规则：

.image div:after {
    content: url(https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg);
    display: block;
    position: absolute;
    bottom: -100px;
    right: -60px;
    /* width: 100px; */
    /* height: 120px; */
}

我在chrome和firefox中都进行了测试，它确实有用。

Firefox中的内联块不会缩小到内容

4 个答案:

更新

主要变更

可选更改

演示1

演示2