使用不同媒体查询的图像大小答案

【问题标题】：image size using different media queries使用不同媒体查询的图像大小
【发布时间】：2016-03-13 23:27:41
【问题描述】：

我有以下问题。我在两个 div 的左右分割了一个块，左边包含 640x461 的图像，右边的一个也在两个 div 中分割一个包含文本，在其下方是 640x342 的图像。在移动网站上，这些在彼此下方是图像（640x461），文本块然后是图像（640x342），但是使用媒体例如@media（min-device-width：568px）给定不同的屏幕尺寸，正确的div（text + img）应该浮动在左 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%;
  }
}

【问题讨论】：

您好，能否提供用于加载内容的代码？
我没有发现任何问题，fiddle.jshell.net/3rg7tq85。你能说得具体点吗？

标签： html css media-queries

【解决方案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/

【讨论】：