html - 拉伸半张图像以适合 div 和移动中的一半溢出和桌面中 div 的一半部分中的一半图像显示？

Question

我试图div在桌面视图中仅显示一半图像和一半溢出，而在移动视图中图像拉伸并覆盖 div 的整个宽度而不影响半溢出部分，请在下面查看我的布局。任何帮助深表感谢。

标签： htmlcss

Answer 1

我想我得到了你需要的东西，尽管你可能应该向我们展示一些代码，看看你真正想要做什么。

你可以检查我在这里做的代码：https ://jsfiddle.net/joligoms/vx3de19L/

以及这里的完整视图：https ://jsfiddle.net/joligoms/vx3de19L/show

但是让我们去解释一下（我猜：P）

因此，对于我使用的 HTML 结构：

<div class-"container">
  <div class="paragraph"> <!-- With some text here --> </div>
  <div class="image"> <!-- Image goes here --> </div>
</div>

现在在 CSS 上，我已经display: flex在容器上使用了。

.container {
  display: flex;
}

为了使图像在图像 div 中只显示一半，您需要将位置设置为relative和左侧设置为，50%就像下面的代码一样：

.image img {
  border: 3px solid blue;
  position: relative;
  left: 50%;
  width: 100%; /*Make sure the image occupies whole parent div's width*/
  height: 100%; /* Sets the height to parent div's size */
}

为了更改顺序并使容器内的内容更具响应性，我添加了一个媒体查询，如下所示：

@media only screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
    flex-direction: row;
  }
  
  .container div {
    flex-grow: 1;
  }
  
  .image {
    width: 100%; /* This is important to make the div occupy the whole container and have the image overflow you want */
    order: 1; /* Image now goes first */
  }
  
  .paragraph {
    order: 2; /* Paragraph now goes below*/
  }
}