大图，右侧保持内容大小

Question

我有两种尺寸的图像（垂直和水平），请注意，它们将始终相同。 我正在尝试创建一个可以容纳图像但不会将内容压入并保持相似高度或宽度的容器。 我也不想显示完整尺寸的图像，所以我在考虑使用overflow:hidden 。 我曾在此处看到的JSFiddle中尝试过此操作，但它会拉伸容器。 任何帮助表示赞赏。

<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子元素（这是inline元素），所以我用div更新了您的标记/ CSS

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

 .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>