css_object_fit

by Matsunaga_Ajike

HTML

<section class="contents">
    <section class="contents_sample">
        <p>「object-fit: cover;」なし</p>
        <img class="object_none_fit" src="http://placehold.jp/f93e12/ffffff/630x315.png">
    </section>

    <section class="contents_sample">
        <p>「object-fit: cover;」あり</p>
        <img class="object_fit" src="http://placehold.jp/f93e12/ffffff/630x315.png">
    </section>
</section>

SCSS

.object {
    &_none {
        &_fit {
            @extend .bdr50;
            @extend .icon150;
        }
    }
    &_fit {
        @extend .bdr50;
        @extend .icon150;
        object-fit: cover;
    }
}

.contents {
    width: 100%;
    &_sample {
        width: 40%;
        padding: 1%;
        text-align: center;
        display: inline-block;
        background-color: #f3f3f3;
    }
}


/**
* extend
*/
.bdr50 {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;  
}

.icon150 {
    width: 150px;
    height: 150px;
}