调整大小的响应式图像缩放

我正在制作一个应该在手机上响应的网站，我需要制作一个带有图标的圆形。我把圆形变成了图像和图标。但是，调整窗口大小时，图标不会像圆形图像那样保持它们的比例。我正在使用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

调整大小的响应式图像缩放

回答

相关问题