html - 使用不同媒体查询的图像大小

Question

我有以下问题。我有一个 block 分成左右两个 div，左边包含 640x461 的图像，右边一个也分成两个 div一个包含文本，下面是一张 640x342 的图像。在移动网站上，这些图像位于彼此下方(640x461)，文本 block 然后是图像(640x342)，但使用媒体例如@media(最小设备宽度:568px)给出不同的屏幕尺寸，正确的 div(文本 + img)应该 float 在左侧 div 旁边，但问题是我的左侧图像的高度仍然小于右侧 div 的高度。我应该在这里做什么？

HTML:

<div class="block_acc">
  <div class="lp-bild-left">
    <a>
      <img src="640x461.jpg" />
    </a>
  </div>
  <div class="lp_column">
    <div class="lp_description">
      <div class="lp_textbox_wrapper">
        <span class="headline">text</span>
      </div>
    </div>
    <div class="lp-bild-right">
      <img src="640x342.jpg" />
    </div>
  </div>
</div>

CSS:

@media (min-device-width: 568px) {
  .lp-bild-left{
    float: left;
    width: 50%;
  }
  .lp_column {
    float: left;
    width: 50%;
  }
}

Answer 1

好的，检查这段代码:

<div class="block_acc">
  <div class="lp-bild-left">
    <a href="#">
      <img src="http://planeon.net/wp-content/uploads/hot-air-balloon.jpg" />
    </a>
  </div>

  <div class="lp_column">
    <div class="lp_description">
      <div class="lp_textbox_wrapper">
        <span class="headline">text</span>
      </div>
    </div>

    <div class="lp-bild-right">
      <img src="http://www.whudat.de/images/Albuquerque-Balloon-Fiesta_4.jpg" />
    </div>
  </div>
</div>

CSS...

.block_acc {
  display: block;
  overflow: hidden;
}

@media (min-device-width: 568px) {
  .lp-bild-left {
    float: left;
    width: 50%;
  }
    .lp-bild-left img {
      height: auto;
      width: 100%;
    }

  .lp_column {
    float: left;
    width: 50%;
  }
    .lp_column .lp-bild-right {
      max-width: 100%;
    }
      .lp_column .lp_textbox_wrapper {
        line-height: 0;
      }
        .lp_column .lp_textbox_wrapper .headline {
          font-size: 1vw;
          line-height: normal;
        }

      .lp_column .lp-bild-right img {
        width: 130%;
      }
}

https://fiddle.jshell.net/jonathanzuniga/at57emmd/