Question

在Rails 3.2应用程序中，我使用响应式，可翻转的CSS圈子显示用户头像。但由于父元素需要填充，因此头像不在圆圈中心。

我如何将这个圆圈居中？在可能的情况下，我宁愿保持这个语义标记为img标记，而不是div上的背景图像。

此外，这可以优化吗？我目前有很多嵌套的div！

代码如下，此处jsfiddle。

<div class='responsive-container'> 
  <div class='responsive-inner'>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flip-inner">
        <div class="front">
          <div class="circle">
              <div class="circle-inner">
                  <%= image_tag @user.avatar %>              
              </div>
          </div>
        </div>
        <div class="back">
          <div class="circle">
              <div class="circle-inner">
                 <%= @user.name %>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>

<style>
.responsive-container{
  position: relative;
  width: 50%;
}
.responsive-container:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.responsive-inner{
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.flip-container {
  perspective: 1000;
  -webkit-perspective: 1000; /* Safari and Chrome */
}
  /* flip the pane when hovered */
  .flip-container:hover .flip-inner, .flip-container.hover .flip-inner {
    transform: rotateY(180deg);
    -ms-transform:rotateY(180deg); /* IE 9 */
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
  }
.flip-inner {
  transition: 0.6s;
  -webkit-transition: 0.6s; /* Safari */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; /* Safari and Chrome */
  position: relative;
}
.front, .back {
  backface-visibility: hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.front {
  z-index: 2;
}
.back {
  transform: rotateY(180deg);
  -ms-transform:rotateY(180deg); /* IE 9 */
  -webkit-transform:rotateY(180deg); /* Safari and Chrome */
}
.circle {
  width: 100%; 
  height: 0;
  padding: 50% 0; //padding top & bottom must equal width 
  border-radius: 50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  overflow: hidden;
  border: 1px #000 solid;
}
.circle-inner {
  display: table;
  width:100%;
}
.circle-inner img {
  height: auto;
  width: 100%;
}
.circle-inner p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>

Answer 1

为什么不使用border-radius而不是circle？我认为会更容易。

http://bavotasan.com/2011/circular-images-with-css3/

如何在这个响应迅速，可翻转的圆圈中垂直居中图像？

1 个答案: