Question

我该如何进行响应式设计。这将是平板电脑视图的2列和移动视图的1列。这是我的代码Image inside a circle

CSS
    overflow: hidden;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border: 5px solid #000;
    position: absolute;
    background-color: #fff;
    left: 65px;
}

.bo>img
{
    position: absolute;
    top: 20px;
}

HTML 我们如何管理 LOOPTEK只是印刷和排版行业的伪文本。自1500年代以来，Lorem Ipsum一直是该行业的标准伪文本，当一个未知的打印机拿起一个类型的厨房并打乱制成一本样本书。

    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="bo">
            <img src="imgs/icons/web.png" class="rounded" alt="Events and Activities" onload='fixAspect(this);'>
        </div>
        <div class="bo1 text-center">
          <h5>Web Design</h5>
          <p>Lorem Ipsum is simply dummy
         text of the printing and typesetting
         industry. Lorem Ipsum has been </p>
          <button class="btn">viewport</button>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="bo">
            <img src="imgs/icons/web.png" class="rounded" alt="Events and Activities" onload='fixAspect(this);'>
        </div>
        <div class="bo1 text-center">
          <h5>Mobile App</h5>
          <p>Lorem Ipsum is simply dummy
         text of the printing and typesetting
         industry. Lorem Ipsum has been </p>
          <button class="btn">viewport</button>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="bo">
            <img src="imgs/icons/web.png" class="rounded" alt="Events and Activities" onload='fixAspect(this);'>
        </div>
        <div class="bo1 text-center">
          <h5>Desktop App</h5>
          <p>Lorem Ipsum is simply dummy
         text of the printing and typesetting
         industry. Lorem Ipsum has been </p>
          <button class="btn">viewport</button>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="bo">
           <img src="imgs/icons/web.png" class="rounded" alt="Events and Activities" onload='fixAspect(this);'>
        </div>
        <div class="bo1 text-center">
          <h5>Game App</h5>
          <p>Lorem Ipsum is simply dummy
         text of the printing and typesetting
         industry. Lorem Ipsum has been </p>
          <button class="btn">viewport</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

这是一个示例，您可以根据自己的要求进行更新

CSS

.caption div {
    box-shadow: 0 0 5px #C8C8C8;
    transition: all 0.3s ease 0s;
}
.img-circle {
    border-radius: 50%;
}
.img-circle {
    border-radius: 0;
}

.ratio {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 0;
    padding-bottom: 100%;
    position: relative;
    width: 100%;
}
.img-circle {
    border-radius: 50%;
}
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

HTMl

<div class="container">
	<div class="row">
		<h2>Any image, size doesn´t matter, centered and respecting ratio</h2>
	</div>
    <div class="row">
        <div class="col-sm-2 col-md-6">
            <p> Image in to circle</p>
            <div  class="ratio img-responsive img-circle" style="background-image: url(http://trovacamporella.com/img/trovacamporella-fiat500.png);"></div></div>
          <div class="col-sm-2 col-md-6">
            <p> Image in to circle with link</p>
            <a href="http://trovacamporall.com" class="ratio img-responsive img-circle" style="background-image: url(http://trovacamporella.com/img/trovacamporella-fiat500.png);"></a>
        </div>
     
    </div>
</div>

Answer 2

您可以为此使用引导程序：

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
           <div class="img1"><img src="" class="img-fluid"></div>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <div class="img1"><img src="" class="img-fluid"></div>
        </div>
    </div>
</div>

这使用了Bootstrap 4，您需要将其添加到via a CDN或通过本地下载并提供服务。
col-sm-12：指移动设备(576px to 767px) -> 12，代表1列
col-md-6：它是指平板电脑设备(768px to 992px) -> 6，代表2列
您可以在线阅读更多Bootstrap的结构。一些很好的资源是Bootstrap网站和W3Schools。例如，下面是一些CSS：
```
.img1, .img2 {
    border:2px solid #000;
    border-radius: 50%;
    padding:20px;
}
```

如果要创建圆形图像，则需要首先为图像指定高度和宽度，如下所示：

.img1 img, .img2 img {
    height:100px;
    width:100px;
    line-height: 100px;
    border-radius:50%;
}

引导程序：圆圈内的图像，底部具有框内容

2 个答案: