php - 大图，保持右边内容的大小

Question

我有两种尺寸的图像(垂直和水平)，它们将始终具有相同的尺寸，恭敬。我正在尝试创建一个容器来容纳图像但不会将内容推到上面并保持相似的高度或宽度。我也不想显示完整尺寸的图像，所以我在考虑使用 overflow:hidden。我在此处看到的 JSFiddle 中尝试过此操作，但它会拉伸(stretch)容器。感谢您的帮助。

<div>
  <span class="mixSpanLeft">
    <a href="somePlace.html"><img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" /></a>
  </span>
  <span class="mixSpanRight">
    <p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes?  Should I have completely different styles for them?
    </p>
  </span>
</div>

http://jsfiddle.net/hmjoLmej/4/

Answer 1

像这样的事情怎么样。

我使用了更合适的 flexbox 而不是 float，这样可以更好地控制布局。

图像是使用 background 添加的，它可以更好地控制缩放、裁剪等。

请注意，由于 p 是 block 元素，它们不应是 span(内联元素)的子元素，因此我更新了您的标记/CSS使用 div

已更新，展示了如何在标记中添加图像源

.wrapper {
  display: flex;
}

.mixSpanLeft {
  width: 50%;
  background-color: #abc;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.mixSpanLeft a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.mixDivRight {
  width: 50%;
  background: #def;
}

.mixDivRight p {
  padding: 2%;
}

<div class="wrapper">
  <span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)">
  <a href="somePlace.html"></a>
  </span>
  <div class="mixDivRight">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>

<div class="wrapper">
  <span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
  <a href="somePlace.html"></a>
  </span>
  <div class="mixDivRight">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>