画像が正しくフォーマットされていません

Question

私は6等分に分割された画像を取得しようとしています。画像を中央に配置するように分割し、サイズを変更して画像をスプライスします。私が紛失しているものは解決できません。

画像は四角形ではなく正方形から出ているように見えますが、私はそれが問題だと信じていますが、何をしているのか分かりません。

ありがとうございました！ありがとう！

私はリンクを追加しただけでなく、それは、アスペクト比の問題ですコード https://codepen.io/mikechristopher/pen/gMLEYx?editors=1100

HTML

<ul class="cards"> 
    <li class="cards__axis"> 
    <figure class="cards__front"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-0.jpeg" alt="" /> 

    </figure> 
    <figure class="cards__back"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-0.jpeg" alt="" /> 
     <figcaption class="cards__description--back"> 
     <p>ABOUT</p> 
     </figcaption> 
    </figure> 
    </li> 
    <li class="cards__axis"> 
    <figure class="cards__front"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-1.jpeg" alt="" /> 

    </figure> 
    <figure class="cards__back"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-1.jpeg" alt="" /> 
     <figcaption class="cards__description--back"> 
     <p>PORTFOLIO</p> 
     </figcaption> 
    </figure> 
    </li> 
    <li class="cards__axis"> 
    <figure class="cards__front"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-2.jpeg" alt="" /> 

    </figure> 
    <figure class="cards__back"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-2.jpeg" alt="" /> 
     <figcaption class="cards__description--back"> 
     <p>CONTACT</p> 
     </figcaption> 
    </figure> 
    </li> 
</ul> 
<ul class="cards"> 
    <li class="cards__axis"> 
    <figure class="cards__front"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-0.jpeg" alt="" /> 

    </figure> 
    <figure class="cards__back"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-0.jpeg" alt="" /> 
     <figcaption class="cards__description--back"> 
     <p>LINK</p> 
     </figcaption> 
    </figure> 
    </li> 
    <li class="cards__axis"> 
    <figure class="cards__front"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-1.jpeg" alt="" /> 

    </figure> 
    <figure class="cards__back"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-1.jpeg" alt="" /> 
     <figcaption class="cards__description--back"> 
     <p>LINK</p> 
     </figcaption> 
    </figure> 
    </li> 
    <li class="cards__axis"> 
    <figure class="cards__front"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-2.jpeg" alt="" /> 

    </figure> 
    <figure class="cards__back"> 
     <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-2.jpeg" alt="" /> 
     <figcaption class="cards__description--back"> 
     <p>LINK</p> 
     </figcaption> 
    </figure> 
    </li> 
</ul> 


<!--[if lt IE 10]> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script type="text/javascript"> 
$(function() { 
    $('.cards__back').hide(); 
    $('.cards__axis').mouseenter(function() { 
    $(this).find('.cards__back').fadeToggle(); 
    }).mouseleave(function() { 
    $(this).find('.cards__back').fadeToggle(); 
    }); 
})(); 
</script> 
<![endif]--> 

CSS

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    background: #333; 
    font-family: 'Georgia', sans-serif; 
} 

.cards * { 
    width: 100%; 
    height: 100%; 
} 

.cards__axis { 
    position: relative; 
} 

.cards__axis:before { 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 

.cards__front, 
.cards__back { 
    position: absolute; 
    top: 0; 
    margin: 0; 
    -webkit-transition: 0.9s ease-in-out; 
    -moz-transition: 0.9s ease-in-out; 
    -ms-transition: 0.9s ease-in-out; 
    -o-transition: 0.9s ease-in-out; 
    transition: 0.9s ease-in-out; 
} 

.cards__front { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: perspective(1000px) rotateY(0deg); 
    -moz-transform: perspective(1000px) rotateY(0deg); 
    -ms-transform: perspective(1000px) rotateY(0deg); 
    -o-transform: perspective(1000px) rotateY(0deg); 
    transform: perspective(1000px) rotateY(0deg); 
} 

.cards__axis:hover .cards__front { 
    -webkit-transform: perspective(1000px) rotateY(-180deg); 
    -moz-transform: perspective(1000px) rotateY(-180deg); 
    -ms-transform: perspective(1000px) rotateY(-180deg); 
    -o-transform: perspective(1000px) rotateY(-180deg); 
    transform: perspective(1000px) rotateY(-180deg); 
} 

.cards__back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: perspective(1000px) rotateY(180deg); 
    -moz-transform: perspective(1000px) rotateY(180deg); 
    -ms-transform: perspective(1000px) rotateY(180deg); 
    -o-transform: perspective(1000px) rotateY(180deg); 
    transform: perspective(1000px) rotateY(180deg); 
} 

.cards__axis:hover .cards__back { 
    -webkit-transform: perspective(1000px) rotateY(0); 
    -moz-transform: perspective(1000px) rotateY(0); 
    -ms-transform: perspective(1000px) rotateY(0); 
    -o-transform: perspective(1000px) rotateY(0); 
    transform: perspective(1000px) rotateY(0); 
} 


/* CUSTOM STYLES FOR THIS UNORDERED LIST */ 

.cards { 
    width: 85%; 
    margin: 0 15%; 
} 

.cards { 
    list-style-type: none; 
    padding-left: none; 
} 

.cards:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.cards__axis { 
    float: left; 
    width: 20%; 
} 

.cards__description--back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 98%; 
    background: rgb(255, 255, 255); 
    background: rgba(255, 255, 255, 0.7); 
} 

.cards__description--back p { 
    position: absolute; 
    width: 100%; 
    top: 50%; 
    margin-top: -1em; 
    text-align: center; 
    font-size: 2em; 
    font-family: 'Impact', sans-serif; 
    color: #880000; 
    -webkit-transform: rotate(-30deg); 
    -moz-transform: rotate(-30deg); 
    -ms-transform: rotate(-30deg); 
    -o-transform: rotate(-30deg); 
    transform: rotate(-30deg); 
} 

Answer 1

を追加するように言われて。パネルの高さを100％に設定しますが、比率は維持されないように幅とは無関係です。私が何を意味するかを見るには、.cards__backイメージパネルの1つからheight:100%を取り除いてください。

heightは、親要素の幅に由来することに注意してください。

どのようにアスペクト比を維持していますか？私が入る時間がなく、マークアップを編集する必要がある方法はいくつかありますが、パネルの高さをゼロに設定し、パディング - ボトムを高さの何％までに設定することができますあなたが欲しいもの。