Question

我有四个方形图像具有相同的宽度和高度（可能是500 * 500），我想使用自举网格形成以下网格。

我的html如下所示（在下面的代码段下运行，全屏查看），

.p0 {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-sm-6 p0">
    <img src="https://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" class="img-responsive">
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-12 p0">
        <img src="http://www.gemini.edu/images/pio/press_release/2012/pr2012-8/fig1.jpg" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 p0">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/7f/7f/53/7f7f536655a69664e130c797e359d27d--flowers-for-you-blue-flowers.jpg" class="img-responsive">
      </div>
      <div class="col-sm-6 p0">
        <img src="https://artstor.files.wordpress.com/2017/02/mma_fragmentary_head_ofa_queen2.png?w=500&h=500" class="img-responsive">
      </div>
    </div>
  </div>
</div>

不使用背景图像和图像上的延伸如何实现并获得上述结果。

提前致谢。

Answer 1

使用填充和边距进行放置，对于左侧的图片（大图片）您可以使用float: left;我建议使用bootstrap。更容易。您也可以使用div：max-width:'size what you want' and max-height:'size what you want。

Answer 2

.p0 {
  padding: 0 !important;
}
.secondImg img {
  max-height: 164px;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-6 p0">
    <img src="https://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" class="img-responsive">
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-12 p0 secondImg">
        <img src="http://www.gemini.edu/images/pio/press_release/2012/pr2012-8/fig1.jpg" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 p0">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/7f/7f/53/7f7f536655a69664e130c797e359d27d--flowers-for-you-blue-flowers.jpg" class="img-responsive">
      </div>
      <div class="col-xs-6 p0">
        <img src="https://artstor.files.wordpress.com/2017/02/mma_fragmentary_head_ofa_queen2.png?w=500&h=500" class="img-responsive">
      </div>
    </div>
  </div>
</div>

Answer 3

不同尺寸的相同比例图像会导致一些拉伸。下面的片段是你想要的吗？

＆＃13;

.noPadd{
  padding-left: 0;
  padding-right: 0;
}
.p0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.left.one.large img{
height: 220px;
width: 100%;
}
.right.one img{
height: 110px;
width: 100%;
}
.right.two img{
height: 110px;
width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-6 p0 left one large">
    <img src="https://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" class="img-responsive">
  </div>
  <div class="col-xs-6 noPadd">
    <div class="row right one">
      <div class="col-xs-12 p0">
        <img src="http://www.gemini.edu/images/pio/press_release/2012/pr2012-8/fig1.jpg" class="img-responsive">
      </div>
    </div>
    <div class="row right two">
      <div class="col-xs-6 p0">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/7f/7f/53/7f7f536655a69664e130c797e359d27d--flowers-for-you-blue-flowers.jpg" class="img-responsive">
      </div>
      <div class="col-xs-6 p0">
        <img src="https://artstor.files.wordpress.com/2017/02/mma_fragmentary_head_ofa_queen2.png?w=500&h=500" class="img-responsive">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

这解决了我的问题并得到了我想要的输出而没有拉伸任何图像。

在这里，我设置了第二张图片父position:relative和padding-top:50%，然后是图片position:absolute和top:0。它给出了我正在寻找的东西。

谢谢大家的支持。

.p0 {
  padding: 0 !important;
}

.half-img-container {
  position: relative;
  padding-top: 50% !important;
}

.half-img {
  position: absolute;
  top: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-xs-6 p0">
    <img src="https://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" class="img-responsive">
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-12 half-img-container p0">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/7f/7f/53/7f7f536655a69664e130c797e359d27d--flowers-for-you-blue-flowers.jpg" class="img-responsive half-img">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 p0">
        <img src="http://www.gemini.edu/images/pio/press_release/2012/pr2012-8/fig1.jpg" class="img-responsive">
      </div>
      <div class="col-xs-6 p0">
        <img src="https://artstor.files.wordpress.com/2017/02/mma_fragmentary_head_ofa_queen2.png?w=500&h=500" class="img-responsive">
      </div>
    </div>
  </div>
</div>

使用img标签

4 个答案: