我正在努力完成这个简单的任务。我有一个位于顶部的 Logo ，我想在该 Logo 下方添加两个社交图标。当有人在移动设备上打开该页面时，我希望它能够正确调整大小。我遇到的问题是:
1)如何在中间( Logo 下方)制作那些社交图标
2) 如您所见，我找到了一个可以缩放 Logo 图像的代码，但是社交图标呢，它们也会缩放吗？
body {
background: white;
}
div.shadow {
position:absolute;
max-width:45%;
max-height:45%;
top:50%;
left:50%;
overflow:visible;
}
img.logo {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
img.margin {
margin-right: 5em;
}
img.size {
width: 100px;
height: 100px;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="shadow">
<div>
<img class="logo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/925cb179-def2-4e5c-9ad5-dd5d4b13a82c/d5n943h-18d11997-1817-4bcc-8369-2e859abce30b.png/v1/fill/w_1192,h_670,q_70,strp/random_new_wallpaper__1920x1080__by_joethewiltshire_d5n943h-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzkyNWNiMTc5LWRlZjItNGU1Yy05YWQ1LWRkNWQ0YjEzYTgyY1wvZDVuOTQzaC0xOGQxMTk5Ny0xODE3LTRiY2MtODM2OS0yZTg1OWFiY2UzMGIucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.NjrkHarfMG82i4VGLEVTluc6bMFkud-9KeF8vOJbqlE" />
</div>
<div class="social">
<img class="margin size" src="https://www.facebook.com/images/fb_icon_325x325.png" /><img class="size"src="https://www.facebook.com/images/fb_icon_325x325.png" />
</div>
</div>
</body>
</html>社交图像不在中间，并且在调整窗口大小时不缩放。
请帮忙
最佳答案
我建议使用 css flex-boxes。使用它们，您可以非常简单地安排、排序和调整元素大小。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
对于动态缩放，我建议使用 css 单元 vw 和 vh。这些单位与您的屏幕分辨率有关，而不是与 % 等父对象相关。
body {
background: white;
}
div.shadow div {
display:flex;
justify-content: center;
}
div.shadow div.logo {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: auto;
}
div.shadow div.social img {
margin: 5px;
}
img.logo {
width:40vw;
height: auto;
}
img.size {
width: 10vw;
height: 10vw;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="shadow">
<div class="logo">
<img class="logo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/925cb179-def2-4e5c-9ad5-dd5d4b13a82c/d5n943h-18d11997-1817-4bcc-8369-2e859abce30b.png/v1/fill/w_1192,h_670,q_70,strp/random_new_wallpaper__1920x1080__by_joethewiltshire_d5n943h-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzkyNWNiMTc5LWRlZjItNGU1Yy05YWQ1LWRkNWQ0YjEzYTgyY1wvZDVuOTQzaC0xOGQxMTk5Ny0xODE3LTRiY2MtODM2OS0yZTg1OWFiY2UzMGIucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.NjrkHarfMG82i4VGLEVTluc6bMFkud-9KeF8vOJbqlE" />
</div>
<div class="social">
<img class="margin size" src="https://www.facebook.com/images/fb_icon_325x325.png" />
<img class="size"src="https://www.facebook.com/images/fb_icon_325x325.png" />
</div>
</div>
</body>
</html>或者，您可以使用transform 将几乎所有内容居中。
关于html - 将图像一个接一个地放置并保持响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56162976/