如何在屏幕的每个角落放置图片

时间:2017-05-11 17:16:17

标签: html css

我认为我的问题对于这张图片来说是可以理解的:(好像我现在不能发布图片......这是链接) http://i.imgur.com/xpCaj0U.png

我希望每个角落都有照片,只有2个像素的边框占据整个屏幕。 对我来说似乎是一个愚蠢的问题,但由于我是初学者,所以没有找到解决方案。无论如何,我想知道这样做的最好方法,考虑到我可能会把gif的动画放在悬停上。

提前感谢您的帮助:)

4 个答案:

答案 0 :(得分:1)

以下是您要求的示例。扩展代码段以获得最佳体验。



html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

img {
  width: 50%;
  height: 50%;
  width: 50%;
  height: 50%;
  background-position: 50% 50%;
  background-size: cover;
  border: 2px solid black;
  box-sizing: border-box;
  position: absolute;
}

#topLeft {
  background-image: url("https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg?h=350&auto=compress&cs=tinysrgb");
  left: 0;
  top: 0;
}

#topRight {
  background-image: url("https://images.pexels.com/photos/37029/pexels-photo.jpg?h=350&auto=compress&cs=tinysrgb");
  right: 0;
  top: 0;
}

#botLeft {
  background-image: url("https://images.pexels.com/photos/89775/dog-hovawart-black-pet-89775.jpeg?h=350&auto=compress&cs=tinysrgb");
  left: 0;
  bottom: 0;
}

#botRight {
  background-image: url("https://images.pexels.com/photos/33053/dog-young-dog-small-dog-maltese.jpg?h=350&auto=compress&cs=tinysrgb");
  right: 0;
  bottom: 0;
}

<img id="topLeft">
<img id="topRight">
<img id="botLeft">
<img id="botRight">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

很多可能性。首先使用宽度和高度50%,然后使用顶部,底部,左侧,右侧。查看这些以确切了解如何使用它们。也漂浮,或者你甚至可以使用一张桌子(可能是最简单的)。

答案 2 :(得分:0)

为每张图片指定width:50; height50; float:left;的css样式。这对我有用

答案 3 :(得分:0)

以下是响应式网页设计:

bpm_package.children[0].copy(bpm_package.children[0].parent);