Question

我试图将我的主页划分为四个偶数图像而没有滚动。当你点击网站我想要四个图像填满整个屏幕，没有滚动。在这里，我现在有多远，但它的工作并不安静。有什么建议吗？

＆＃13;

img {
  max-width: 100%;
  height: auto;
}
#container {
  max-width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.containermenu img {
  width: 50%;
  height: auto;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
</div>

＆＃13;

我的代码 Here

Answer 1

对，我就是这样做的。我会制作4个盒子并将它们放置在屏幕的每个四分之一处。然后我给每个人一个背景图像，设置为保持居中并覆盖整个盒子。

/* Sizing */
.containermenu {
  position: absolute;
  width: 50vw;
  height: 50vh;
  background-size: cover;
  background-position: center;
}

/* Images */
.tl {
  background-image: url(https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg);
}
.tr {
  background-image: url(https://image.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg);
}
.br {
  background-image: url(https://images.blogthings.com/whatpatternisyourbrainquiz/pattern-2.jpg);
}
.bl {
  background-image: url(https://static1.squarespace.com/static/5459ec52e4b04d305f68f1ed/t/548a96e1e4b0a10ad41ef12f/1418368738802/Pattern14.jpg?format=1000w);
}

/* Positioning */
.tl,
.tr {
  top: 0
}
.br,
.tr {
  right: 0
}
.bl,
.br {
  bottom: 0
}
.tl,
.bl {
  left: 0
}

<a href="#" class="containermenu tl"></a>
<a href="#" class="containermenu tr"></a>
<a href="#" class="containermenu br"></a>
<a href="#" class="containermenu bl"></a>

希望这有用。

Answer 2

    Is your looking ?

.containermenu{width:25%;float:left}
.containermenu img
{
width: 100%;
height: auto;
float: left;
}

点击here！

Answer 3

如果您想保持比例，可以将图像用作CSS中的背景并使用

background-size: cover;

Answer 4

在您的CSS中，您尝试使用视口大小调整，因此除了设置{{1}之外，您必须将元设置为可供使用，body height和width为100％ }和padding为0去除@Andrew Bone建议的白色边界。

＆＃13;

margin

＆＃13;

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

#container {
  max-width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.containermenu img{
  width: 50%;
  height: auto;
  float: left;
}

＆＃13;

Answer 5

有两种不同的方法可以实现此结果

带图片

如果你想使用图像，你可以使用 object-fit: cover财产。关于这一点的好处是，它的行为类似于background-image: cover，但您可以将其直接设置为图像并且不会被拉伸。还有一个object-position属性。可悲的是，这个伟大的功能并不是唯一的Internet Explorer甚至是Edge的完整supported 。

<强> HTML

<div id="container">
  <img src="https://static.pexels.com/photos/32237/pexels-photo.jpg" alt="" />
  <img src="https://static.pexels.com/photos/30168/pexels-photo-30168.jpg" alt="" />
  <img src="https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg" alt="" />
  <img src="https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg" alt="" />
</div>

<强> CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  background: #000;
  font-size: 0;
  overflow: hidden;
}

#container img {
  width: 50%;
  height: 50%;
  display: inline-block;
  object-fit: cover;
  object-position: center;
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}
#container img {
  width: 50%;
  height: 50%;
  display: inline-block;
  object-fit: cover;
  object-position: center;
}

<div id="container">
  <img src="https://static.pexels.com/photos/32237/pexels-photo.jpg" alt="" />
  <img src="https://static.pexels.com/photos/30168/pexels-photo-30168.jpg" alt="" />
  <img src="https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg" alt="" />
  <img src="https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg" alt="" />
</div>

使用背景图片

一个小缺点是您必须在CSS中设置图像的路径，但最大的好处是您可以使用每个浏览器支持的background-size: cover。在这里，您还可以使用nth-child选择器，这样您就不必给每个div，在这种情况下.img左，右或类别。

<强> HTML

<div id="container">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

<强> CSS

html,
body {
   height: 100%;
}

body {
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}

#container .img{
  width: 50%;
  height: 50%;
  display: inline-block;
  background-size: cover;
}

.img:nth-child(1){
  background-image: url(https://static.pexels.com/photos/32237/pexels-photo.jpg);
}

.img:nth-child(2){
  background-image: url(https://static.pexels.com/photos/30168/pexels-photo-30168.jpg);
}

.img:nth-child(3){
  background-image: url(https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg);
}

.img:nth-child(4){
  background-image: url(https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}
#container .img {
  width: 50%;
  height: 50%;
  display: inline-block;
  background-size: cover;
  background-position: center;
}
.img:nth-child(1) {
  background-image: url(https://static.pexels.com/photos/32237/pexels-photo.jpg);
}
.img:nth-child(2) {
  background-image: url(https://static.pexels.com/photos/30168/pexels-photo-30168.jpg);
}
.img:nth-child(3) {
  background-image: url(https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg);
}
.img:nth-child(4) {
  background-image: url(https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg);
}

<div id="container">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

试图将主页分为四个部分

5 个答案: