Question

我正在努力完成这项简单的任务。我的徽标是顶部的徽标，并且要在该徽标下方添加两个社交图标。当有人在移动设备上打开该页面时，我希望它能够正确调整大小。我的问题是：

1）如何在中间（徽标下方）制作这些社交图标

2）如您所见，我发现了一个可以对徽标图像进行缩放的代码，但是社交图标又会缩放吗？

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>

社交图像不在中间，并且在调整窗口大小时不会缩放。

请帮助

Answer 1

我建议使用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将几乎所有内容居中。

Answer 2

.shadow {
    width: 100%;
    height: 100%;
    
    }
    .logo {
        width: 15%;
    }
    
    .social{
        width: 100%;
    }
    .size {
    width: 100px;
    height: 100px;
    }

    @media (max-width: 600px){
        .logo {
            width: 60%;
        }
    }

    
        <div class="shadow">
            <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 class="social">
                <img class="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>

将图像相互定位并保持响应

2 个答案: