與flexbox響應img

嗨，謝謝任何人回覆這篇文章。與flexbox響應img

我用一個錨標籤包裝了img，並且img不再在頁面調整大小時收縮。我知道flexbox僅將flex屬性應用於子元素，因此使用錨點包裝img會使其成爲孫子。但即使將Flex應用到錨點，圖像仍然無法縮小。

.rightContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
    background: #375D81; 
 
} 
 

 
.leftContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: #183152; 
 
}

<div class="rightContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor </p> 
 
     <a href="https://color.adobe.com/explore/most-popular/?time=all"> 
 
      <img src="http://placehold.it/350x150" alt="" /></a> 
 
    </div> 
 

 
    <div class="leftContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor</p> 
 
     <a href="http://lorempixel.com/"></a><img class="right " src="http://placehold.it/350x150" alt="" /> 
 
    </div>

來源

2016-11-08 Gelgamek

嘗試賦予anchor'min-width：0'。 http://stackoverflow.com/q/36247140/3597276 –

沒有工作我害怕。感謝您的鏈接，雖然是一個有趣的閱讀。 – Gelgamek

你能否請用一個例子創建一個片段，以便我們可以提供幫助？ –

的圖像不限制於柔項a圖像沒有萎縮 - 僅僅使用：

a img{ 
    width: 100%; 
}

現在img將尊重尺寸的a。請參閱here for more info瞭解我們如何限制圖像的尺寸，而不會影響固有的aspect-ratio。

.rightContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
    background: #375D81; 
 
} 
 

 
.leftContent { 
 
    color: white; 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: #183152; 
 
} 
 
a img{ 
 
    width: 100%; 
 
}

<div class="rightContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor </p> 
 
     <a href="https://color.adobe.com/explore/most-popular/?time=all"> 
 
      <img src="http://placehold.it/350x150" alt="" /></a> 
 
    </div> 
 

 
    <div class="leftContent"> 
 
     <h3>Date Added: 11/4/2016</h3> 
 
     <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor</p> 
 
     <a href="http://lorempixel.com/"><img class="right " src="http://placehold.it/350x150" alt="" /></a> 
 
    </div>

來源

2016-11-09 09:33:11 kukkuz

包裹標籤內的第二圖像（它在你的標記的標籤外），即

<a href="http://lorempixel.com/"><img class="right" src="http://placehold.it/350x150" alt="" /></a>

，並應用以下CSS。

.leftContent a img, 
.rightContent a img{ 
    max-width:100%; 
}

來源

2016-11-09 09:53:53

與flexbox響應img

回答

相關問題