響應CSS編碼中的圖像問題

我在我的網站上使用封面圖片進行響應式工作。但我得到''標記，而不是CSS文件。所以當我進行響應式工作時，圖像不適合。響應CSS編碼中的圖像問題

我將寬度設置爲100％，高度設置爲自動。但即便如此，圖像並不適合。

頂部和底部有空間。我想讓圖像在縮小屏幕時縮放，並且圖像留在沒有頂部和底部空間的自己的標籤中。

2017-05-24 aalicenk

嗨aalicenk，請提供您所使用的代碼，如果你既分享實際圖像或者至少包括圖像尺寸，這將有助於所以我們可以重現您當前的佈局。 –

你應該像這樣包含你的圖像 - background-image：url（image.png）;添加高度和寬度，然後使用背景屬性進行縮放等。https://www.w3schools.com/css/css_background.asp – Giedrius

嗨親愛的朋友。對於遲到的回答我很抱歉。實際圖像尺寸爲1140x450。我爲img使用該代碼：height：auto; position：absolute;最大寬度：100％。這些代碼對於響應式而言正常工作，但在縮小屏幕時發生頂部和底部空間。我使用img將是可靠的。所以我不使用CSS文件。當我嘗試使用CSS代碼時，發生了這種情況。但我不想要這個。我想在img中使用HTML標記。我尋找非常有關這個問題的答案，但我找不到。我的英語很弱，所以如果我不能告訴你我的問題。謝謝你的時間。 – aalicenk

你應該試試這段代碼。如果我理解正確，這就是你想要做的。

使圖像高度：100％（覆蓋容器的整個高度）;寬度：自動保存圖像的高寬比並居中圖像。

看到片斷或jsFiddle

.container { 
 
    height:700px; 
 
    width:100%; 
 
    position:relative; 
 
    background:red; 
 
    overflow:hidden; 
 
}

<div class="container"> 
 
<img src="http://lorempixel.com/1140/450/" height="100%" width="auto" style="position:absolute;left:50%;transform:translateX(-50%)"/> 
 
</div>

來源

2017-05-25 10:44:28

親愛的朋友，謝謝。我通過參考例子解決了問題。問題用一個小代碼解決。我正在使用該代碼：'code' style =「transform：scale（X，Y）;」 'code'。我可以通過這種方式放大圖像。當我做響應工作時，圖像縮小。謝謝大家。 – aalicenk

好，如果這個答案適合你。請評估爲接受。感謝：D –

響應CSS編碼中的圖像問題

回答

相關問題