大圖，右側保持內容大小

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>