文章/答案/技术大牛

发布

社区首页 >问答首页 >将一个图像放置在另一个图像上，并保持响应

问将一个图像放置在另一个图像上，并保持响应
EN

Stack Overflow用户

提问于 2019-05-16 15:24:08

回答 2查看 35关注 0票数 0

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

1)如何制作中间的社交图标(位于logo下方)

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>

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

请帮帮忙

html

css

responsive-design

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-16 15:37:56

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

票数 1

Stack Overflow用户

发布于 2019-05-16 16:26:29

.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56162976

复制

相似问题

问将一个图像放置在另一个图像上，并保持响应
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将一个图像放置在另一个图像上，并保持响应EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将一个图像放置在另一个图像上，并保持响应
EN