首页 文章

全高图像作为文本

提问于
浏览 次
0

我试图使图像作为文本占据div的全高，并保持它与宽度成比例，因为溢出被隐藏，图像居中，我使用显示flex，我不想使用背景图像因为我有多个图像和文章 . 有人可以帮忙吗？

div {
  border: 1px dotted red;
  display: block;
}

.article {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width: 100%;
  overflow: auto;
  padding: 10px;
}

.article-content {
  height: 100%;
  width: 48.6666666%;
  text-align: left;
}

.image {
  margin-left: 3.5%;
  width: 48%;
  overflow: hidden;
}

.img-control {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.img-control img {
  height: 100%;
}

<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
  </div>
  <div class="image">
    <div class="img-control">
      <img src="http://via.placeholder.com/490x338" alt="" />
    </div>
  </div>
</div>
html css css3 flexbox

1 回答

  • 1

    为了得到你想要的东西，我首先建议只使用1个flex容器而不是2个 . 这样两个“内容容器”（文本和图像）可以在同一个上下文中灵活项目，你可以拉伸它们以匹配高度 .

    更新的HTML将如下所示：

    <div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="img-control">
    <img src="http://via.placeholder.com/490x338" alt="" />
  </div>
</div>

    CSS将是：

    .article {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}

.article-content {
  height: 100%;
  width: 48.6666666%;
  text-align: left;
}

.img-control {
  margin-left: 3.5%;
  width: 48%;
  overflow: hidden;
  align-self: stretch;
}

    在 .img-control flex项目上，我添加了 align-self: stretch; 以拉伸它以匹配其他弹性项目（ .article-content 中的文本）和 overflow: hidden; 以隐藏可能溢出的图像部分 .

    然后我只是在图像上添加了一个样式，使其居中并占据其拉伸容器的100％高度：

    .img-control img {
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

    您可以通过调整框架窗口的大小来查看演示here .

    但是这种方法存在问题 . 当文本内容比图像短时，它们与高度不匹配，图像可能不会填充宽度，留下白色空间的间隙 . 您可以通过查看上面的演示小提琴并将框架窗口拉得很宽来看到这一点 .

    要解决此问题，我建议使用 background-image 以及 background-size: cover; 和 background-position: center center; . 然后你只需简单地创建一个div并将图像源设置为内联样式 .

    像这样：

    <div class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>

    CSS：

    .img-control .image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

    现在看到这个改进的demo fiddle并将框架窗口拉伸到任何大小 .

    回复于

相关问题