大圖像，右側內容保持大小

我有兩種尺寸的圖像（垂直和水平），他們將始終是相同的大小，恭敬地。我正在嘗試創建一個容器，用於容納圖像，但不會將內容推入並保持相似的高度或寬度。我也不想顯示圖像的全尺寸，所以我想使用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/

來源

2016-10-04 Cool Shape

什麼這樣的事情。

我使用了更合適的flexbox而不是float，它可以更好地控制佈局。

該圖像是使用background，這提供了更大的控制至刻度，夾加入等

注意，由於p是塊元件它們不應該是一個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>

來源

2016-10-04 19:27:12 LGSon

感謝LGSon！這正是我想解釋的......然而，有沒有辦法做到這一點或類似的，但不使用背景圖片？在頁面上會有多個這樣的內容，並且不能在CSS中使用圖片。 –

@CoolShape由於沒有真正好的方法來使用'img'來做到這一點，我更新了我的答案，展示瞭如何在標記中添加圖像源 – LGSon

啊啊！這就說得通了。所以你仍然在設置它，但只是「內聯」。我喜歡這個。萬分感謝！我需要重新閱讀元素。 –

大圖像，右側內容保持大小

回答

相關問題