使用CSS从中心显示矩形图像[关闭]

【问题标题】：Display rectangular image in quare from the center using CSS [closed]使用CSS从中心显示矩形图像[关闭]
【发布时间】：2019-05-24 14:27:10
【问题描述】：

我有这段显示 9 张图片的 css/html 代码。有些图片可能是矩形的，我希望它们像其他图片一样显示在正方形中。我需要调整哪些 CSS 规则？ html的结构如图，现在的css规则也是。

我有这段显示 9 张图片的 css/html 代码。有些图片可能是矩形的，我希望它们像其他图片一样显示在正方形中。我需要调整哪些 CSS 规则？ html的结构如图，现在的css规则也是。

我有这段显示 9 张图片的 css/html 代码。有些图片可能是矩形的，我希望它们像其他图片一样显示在正方形中。我需要调整哪些 CSS 规则？ html的结构如图，现在的css规则也是。

代码附在下面

@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat";
  color: #303633;
  background-color: #C8D9E7;
  overflow: hidden;
  font-size: 1em;
  font-style: normal;
  -webkit-appearance: none;
  outline: none;
  text-rendering: geometricPrecision;
  perspective: 1000px;
}

a {
  position: relative;
  display: inline-block;
  padding: 12px 35px;
  margin: 0 0 20px;
  background-color: #e1306c;
  color: white;
  border-radius: 5px;
  transition: all 0.3s;
  letter-spacing: 2px;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
  background-color: #e75d8c;
}

.content-wrapper {
  width: 300px;
  max-height: 530px;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
}
.content-wrapper::-webkit-scrollbar {
  display: none;
}
.content-wrapper .img {
  width: 302px;
  height: 350px;
  position: relative;
  overflow: hidden;
}
.content-wrapper .img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(88, 81, 219, 0.25), transparent);
}
.content-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
}




.profile--info {
  text-align: left;
  padding-top: 10px;
}
.profile--info span {
  font-family: "Open Sans", "Adobe Blank";
  z-index: 1;
  left: 15px;
  top: 15px;
  font-size: 0.575em;
  color: rgba(84, 95, 89, 0.75);
  display: block;
}
.profile--info span.username {
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  color: black;
}
.profile--info span.userquote {
  margin-top: -15px;
  font-size: 0.7em;
  color: rgba(84, 95, 89, 0.75);
}

.user {
  background-color: white;
  width: 100%;
  margin-top: 0;
  max-height: 600px;
  position: relative;
  padding: 0 30px;
  box-sizing: border-box;
}

.user-social-wrapper {
  display: flex;
  justify-content: space-around;
  position: relative;
  padding: 5px 0;
  padding-bottom: 15px;
}
.user-social-wrapper::after, .user-social-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
}
.user-social-wrapper::before {
  top: initial;
  bottom: 0;
}
.user-social-wrapper .user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 200;
  flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
  font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
  font-size: 0.75em;
  color: rgba(84, 95, 89, 0.75);
}

.shots {
  width: calc(100% + 60px);
  margin-left: -30px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.shots .shot {
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
}
.shots .shot::after {
  content: "";
  display: block;
  opacity: 0;
  transition: all 0.255s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.shots .shot img {
  transition: all 0.255s;
  width: 102px;
}


@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}
<div class="content-wrapper">


      <div class="user">


        <div class="shots">
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c2daebf39514481b7bdd696df185794a/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c079f9938e0004cd465e9b3a23823638/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/4c03bcf4125a52da4db64348fded2e64/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/2ddf693641bf3e4dad7f0e4113196ed3/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/293669652704407f1519034a237110fc/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/0a8c6666eeaace1c7eff30c25aa672c6/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/7841eff64f571f60c9ec1d169158851e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/a78a72efb59d50ceeae8e6bcbaa82f92/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/77a032f68b948ae7049ea644777fc393/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
                  </div>
                <div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺@bobby_dyr</span><br><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
        <div class="user-social-wrapper">
          <div class="user-info user-posts"><span>104</span><span>Shots</span></div>
          <div class="user-info user-followers"><span>16,963</span><span>Likes</span></div>
          <div class="user-info user-following"><span>643</span><span>Comments</span></div>
        </div>
      </div>
      
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>

  

    <script src="js/index.js"></script>







</div>

【问题讨论】：

标签： html css sass css-selectors


【解决方案1】： 
object-fit: contain;

到

object-fit: cover;

【讨论】：

【解决方案2】：

以下样式足以使您的图像适合：

.content-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

不要忘记将高度和宽度设置为 100%。

@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat";
  color: #303633;
  background-color: #C8D9E7;
  overflow: hidden;
  font-size: 1em;
  font-style: normal;
  -webkit-appearance: none;
  outline: none;
  text-rendering: geometricPrecision;
  perspective: 1000px;
}

a {
  position: relative;
  display: inline-block;
  padding: 12px 35px;
  margin: 0 0 20px;
  background-color: #e1306c;
  color: white;
  border-radius: 5px;
  transition: all 0.3s;
  letter-spacing: 2px;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
  background-color: #e75d8c;
}

.content-wrapper {
  width: 300px;
  max-height: 530px;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
}
.content-wrapper::-webkit-scrollbar {
  display: none;
}
.content-wrapper .img {
  width: 302px;
  height: 350px;
  position: relative;
  overflow: hidden;
}
.content-wrapper .img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(88, 81, 219, 0.25), transparent);
}
.content-wrapper img {
  /*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
  */
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.profile--info {
  text-align: left;
  padding-top: 10px;
}
.profile--info span {
  font-family: "Open Sans", "Adobe Blank";
  z-index: 1;
  left: 15px;
  top: 15px;
  font-size: 0.575em;
  color: rgba(84, 95, 89, 0.75);
  display: block;
}
.profile--info span.username {
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  color: black;
}
.profile--info span.userquote {
  margin-top: -15px;
  font-size: 0.7em;
  color: rgba(84, 95, 89, 0.75);
}

.user {
  background-color: white;
  width: 100%;
  margin-top: 0;
  max-height: 600px;
  position: relative;
  padding: 0 30px;
  box-sizing: border-box;
}

.user-social-wrapper {
  display: flex;
  justify-content: space-around;
  position: relative;
  padding: 5px 0;
  padding-bottom: 15px;
}
.user-social-wrapper::after, .user-social-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
}
.user-social-wrapper::before {
  top: initial;
  bottom: 0;
}
.user-social-wrapper .user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 200;
  flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
  font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
  font-size: 0.75em;
  color: rgba(84, 95, 89, 0.75);
}

.shots {
  width: calc(100% + 60px);
  margin-left: -30px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.shots .shot {
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
}
.shots .shot::after {
  content: "";
  display: block;
  opacity: 0;
  transition: all 0.255s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.shots .shot img {
  transition: all 0.255s;
  width: 102px;
}


@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}
<div class="content-wrapper">


      <div class="user">


        <div class="shots">
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c2daebf39514481b7bdd696df185794a/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c079f9938e0004cd465e9b3a23823638/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/4c03bcf4125a52da4db64348fded2e64/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/2ddf693641bf3e4dad7f0e4113196ed3/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/293669652704407f1519034a237110fc/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/0a8c6666eeaace1c7eff30c25aa672c6/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/7841eff64f571f60c9ec1d169158851e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/a78a72efb59d50ceeae8e6bcbaa82f92/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/77a032f68b948ae7049ea644777fc393/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&amp;se=7&amp;ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
                  </div>
                <div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺@bobby_dyr</span><br><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
        <div class="user-social-wrapper">
          <div class="user-info user-posts"><span>104</span><span>Shots</span></div>
          <div class="user-info user-followers"><span>16,963</span><span>Likes</span></div>
          <div class="user-info user-following"><span>643</span><span>Comments</span></div>
        </div>
      </div>
      
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>

  

    <script src="js/index.js"></script>







</div>

【讨论】：

  • @Robbie Bardijn 的答案是正确的。您只需要添加height: 100%; 以使图像垂直填充它的父级。
猜你喜欢
  • 1970-01-01
  • 2014-04-29
  • 2015-06-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-09
  • 2014-02-24
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode