圖像適合包含Div

我已經做了很多次之前，但它似乎並不出於任何原因現在工作。我希望圖像是容器的整個寬度，但不是。有任何想法嗎？圖像適合包含Div

代碼：

img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
div { 
 
    background: #ccc; 
 
}

<div> 
 
    <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width"> 
 
</div>

來源

2016-10-24 pee2pee

你想要它伸展或放大嗎？ –

您可以將寬度設置爲100％，但高度會相應更改 –

若要適合容器保持寬高比的寬度 – pee2pee

只需添加寬度：100％的img

img { 
    width:100% 
}

來源

2016-10-24 08:47:57 selami

看着你類，您應該添加的是full-width類中的一些CSS，使img寬度達到100％。這樣，只有設置爲「全角」的圖像將被強制100％。另一個將保持max-width規則爲100％，但如果它們較小，則不會調整大小。

img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
.full-width { 
 
    width: 100%; 
 
} 
 
div { 
 
    background: #ccc; 
 
}

<div> 
 
    <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width"> 
 
</div>

來源

2016-10-24 08:50:32 Cladiuss

爲什麼不呢？目前情況就是這樣。該圖片大小爲600px，如果您將該片段放在全寬中，圖片將爲100％。請注意圖像上的「全寬」類。 – Cladiuss

OP爲他的圖像添加了一個'full-width'類。我在全寬類上添加了「width：100％」，以便與他的代碼更加一致。因此，如果容器大於600像素，圖像仍然具有從'全寬度'類應用的'width：100％'。運行代碼片段並展開它。 – Cladiuss

只是讓你圖像寬度100％。即使你調整你的容器圖像將適合它。

img{ 
width:100%; 
}

來源

2016-10-24 08:59:58

您可以檢查更新的小提琴here

更改CSS：

div { 
    height: 100%; 
} 

img { 
    width: 100%; 
    min-height: 100%; 
}

來源

2016-10-24 09:00:42

我知道這是不是直接回答你的問題，但總體來說，放大的圖像看起來很討厭。人們通過這種方式的方式是讓圖像居中，然後在其後添加模糊版本。

像這樣：

body { 
 
    margin: 0; 
 
} 
 
.image { 
 
    position: relative; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    font-size: 0px; 
 
} 
 
.background-image { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg'); 
 
    background-size: cover; 
 
    z-index: -1; 
 
} 
 
.blur { 
 
    filter: blur(10px); 
 
}

<div class="image"> 
 
    <div class="background-image blur"></div> 
 
    <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width"> 
 
</div>

我希望對您有所幫助。

來源

2016-10-24 09:04:52

理論是完全謝謝你。圖像應該被剪裁成適合的尺寸和長寬比，但我會考慮如何使用它。 – pee2pee

因爲你的圖片的高度是600px;，而你已經設置了max-width:100%。所以max-width屬性將只在父潛水將小於600px;時起作用。

要讓包含div的圖像，您必須給設置圖像的屬性100％;那就是.full-width {width: 100%;}

來源

2016-10-24 09:10:08 Guru

圖像適合包含Div

回答

相關問題