Question

我还在学习CSS，无法弄清楚为什么我无法让这张图片在我的模板中做出相应的反应。

它最初是我决定用普通图像替换的背景图像，当最大化时我希望文本位于图像的右侧（没有重叠），并且在响应时我希望图像位于文本上方

似乎只是重叠，任何人都可以告诉我在CSS中错过了什么吗？

<!-- IMAGE CONTAINER SECTION 1 -->
<section class="image-container-section-1 gry-bg">

    <!-- IMAGE CONTAINER  -->
    <div class="image-container-5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5MOpet1ps36ZgsQ98y7O8sJX4vIevqmvMJmr3F1zZRq9n_RYXaQ"/></div>

    <div class="container">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6 col-sm-12">

                <!-- TEXT CONTAINER  -->
                <div class="image-container-1-text">
                    <h3 class=" slideInUp">Dummy Text</h3>
                    <p class="">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,</p>
                    <a class=" " href="">learn more</a>
                </div>

            </div>
        </div>
  </div>

https://jsfiddle.net/6kyomgsv/3/

Answer 1

如果我理解正确，您希望将您的内容拆分为2列。在较小的设备上，您希望堆叠列。您似乎正在尝试使用Bootstrap执行此操作。但是这个库还没有加载到小提琴中。我已经更新了小提琴以包含必要的CSS（在外部资源下）https://jsfiddle.net/6kyomgsv/12/

然后我们可以使用内置类来获得所需的布局。您已经有了HTML来完成它。您可以删除图像定位CSS并将图像向下移动几行。

<!-- IMAGE CONTAINER SECTION 1 -->
<section class="image-container-section-1 gry-bg">

  <!-- IMAGE CONTAINER  -->
  <div class="image-container-5"></div>

  <div class="container">
    <div class="row">
      <div class="col-md-6"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5MOpet1ps36ZgsQ98y7O8sJX4vIevqmvMJmr3F1zZRq9n_RYXaQ" class="img-responsive" /></div>
      <div class="col-md-6 col-sm-12">

        <!-- TEXT CONTAINER  -->
        <div class="image-container-1-text">
          <h3 class=" slideInUp">Dummy Text</h3>
          <p class="">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,</p>
          <a class=" " href="">learn more</a>
        </div>

      </div>
    </div>
  </div>
</section>
<!-- END IMAGE SECTION 1 -->

.col-md-6允许您将网格分成两半。在这种情况下，.col-md将保持这种方式，直到宽度低于970px，然后它将堆叠在彼此之上。如果要在较小的设备上使用其他布局选项，可以添加其他引导类。查看Bootstrap Docs for a nice graph。

我还在您的图片中添加了img-responsive的引导类。这允许图像本身获取其容器的宽度。如果它是一个更大的图像，我通常会添加它。但是如果我不希望它重新调整大小并且已经计划在移动设备上看起来很好，那么可以选择不这样做。

Answer 2

您必须使用img宽度百分比

OR

在bootstrap中你可以使用

<img src="..." class="img-responsive" alt="Responsive image">

了解更多here和here

还有一件事：你没有在小提琴中添加bootstrap库。

PS：在询问SO之前搜索问题。

Answer 3

我认为您正在寻找的是float。 Read about float

你给了你的图像绝对定位，这使得它超出了元素的流量，因此它不知道将文本推向任何一个方向。

<强> CSS：

.image-container-5 > img {
    float: left;
    display: block;
    margin-bottom: 0px;
}

然后在＆＃34; responsive＆＃34;中，您需要添加媒体查询..

@media (max-width: 600px) {
    .image-container-5 > img {
        float: none;
    }
}

小提琴：https://jsfiddle.net/6kyomgsv/10/

Answer 4

您正在将position:absolute直接应用于图像而不提供任何宽度。

示例：

.image-container-5{
position:relative;
width: some percentage %

}

Fyi：您可以将任何位置属性应用于容器ei。浮动，顶部，右侧......

然后：

 .image-container-5 img{
     width:100%:
     max-width:100%;
}

Fyi：如果您希望直接在图片上使用position:absolute，那么容器必须为position:relative

希望这有帮助

Answer 5

我更改了一些样式并添加了下面的jsfiddle。我不确定这是否完全有帮助，但你总能让它对媒体查询做出回应。为了向左浮动，我移除了绝对位置并使其向左浮动。

.image-container-5 > img {
/*   position: absolute; */
  float: left;
  margin: 0 auto;
  display: block;
  margin-bottom: 0px;
  padding: 20px; 
}

https://jsfiddle.net/fnez/8ruyaykh/1/

为什么我的自适应图片不起作用？

5 个答案: