調整大小的響應式圖像縮放

我正在製作一個應該在手機上響應的網站，我需要製作一個帶有圖標的圓形。我把圓形變成了圖像和圖標。但是，調整窗口大小時，圖標不會像圓形圖像那樣保持它們的比例。我正在使用HTML5和CSS3。調整大小的響應式圖像縮放

.theCircle { 
 
    position: relative; 
 
} 
 
#img1 { 
 
    height: auto; 
 
    width: 100%; 
 
} 
 
#img2 { 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 4%; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div class="theCircle"> 
 
    <img id="img1" src="circle.png"> 
 
    <img id="img2" src="pin.png"> 
 
</div>

這裏顯示的div和造型我的代碼。這是一張圖片，顯示了當窗口較大但圖標不是時，圓形的縮放比例。

有什麼想法嗎？

enter image description here

來源

2016-12-22 Mar1ak

指針圖標頂部＆左側百分比總是相應於窗口大小;不是圖像大小/位置。您需要編寫一些腳本/ css trics來查找與圖像大小相關的位置。 – Garfield

代替使用圖像的使這與純的HTML和CSS

*{ 
 
    box-sizing:border-box; 
 
} 
 
.theCircle{ 
 
    width:50vw; 
 
    height:50vw; 
 
    border:2px solid black; 
 
    margin:auto; 
 
    border-radius:25vw; 
 
    position:relative; 
 
} 
 
.innerCircle{ 
 
    width:40vw; 
 
    height:40vw; 
 
    border:2px solid black; 
 
    margin:auto; 
 
    border-radius:25vw; 
 
    position:absolute; 
 
    top:5vw; 
 
    left:5vw; 
 
} 
 
#img2{ 
 
    position:absolute; 
 
    top:22vw; 
 
    left:0; 
 
    width:5vw; 
 
    height:5vw; 
 
}

<div class="theCircle"> 
 
    <div class="innerCircle"> 
 
    </div> 
 
    <img id="img2" src="https://cdn1.iconfinder.com/data/icons/ui-5/502/marker-512.png" /> 
 
</div>

來源

2016-12-22 15:58:58 ab29007

@ Mar1ak它是否解決了您的問題，如果是，那麼請您接受答案。你知道點擊我答案左邊的複選標記。如果沒有，那麼我可能會幫助你， – ab29007

是的，它是有效的，你是一個天才。謝謝。 – Mar1ak

如果你可以完全依靠CSS3（僅如果你不支持舊版本瀏覽器的情況下），你應該能夠解決這個問題用VH和大衆。

例如：如果將項目的寬度和高度都設置爲50vw，它將始終爲視口的一半寬度，並且高度完全相同（始終爲正方形）。

不能寫一個沒有你的PNG文件的完整的例子，你應該檢查瀏覽器支持VW和VH（例如你需要IE9 +）。

來源

2016-12-22 14:30:16 mholzer78

感謝您的回覆，使用vh和vw似乎在某種程度上起作用。在實踐中是否有一種很好的方法來將圖標「裝配」到圓上？例如，我需要在圓圈的邊界內放置四個圖標，並且我需要一切縮放以保持比例，以便圖標不會脫離其預期位置。 – Mar1ak

我不認爲這是可能的，除了位置的位置?? vh/?? vw的項目，這是不是很舒服的。當你使用一個圓圈時，用svg做它可能更方便。它不像您想象的那麼複雜，並且可以使用幾行JS代碼輕鬆實現，以防萬一您需要它動態。但是使用SVG會導致再次檢查瀏覽器支持！所有瀏覽器（尤其是IE）都不支持SVG – mholzer78

調整大小的響應式圖像縮放

回答

相關問題