JSFiddle - React, Tailwind, and code Playground

by furqan_694

HTML

<!doctype html>

<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>The HTML5 Herald</title>
        <meta name="description" content="The HTML5 Herald">
        <meta name="author" content="SitePoint">

        <link rel="stylesheet" href="css/styles.css?v=1.0">

    </head>

    <body>

        <!-- original size -->
        <div class="img-wrapper">
            <h3>Normal Image</h3>
            <div class="card">
                <img src="https://i.stack.imgur.com/YkuCP.png" /></div>
        </div>

        <!-- For vertical display -->
        <div class="img-wrapper">
            <h3>Vertical</h3>
            <div class="card vertical">
                <img src="https://i.stack.imgur.com/YkuCP.png" /></div>
        </div>

        <!-- For horizontal display -->
        <div class="img-wrapper">
            <h3>Horizontal</h3>
            <div class="card horizontal">
                <img src="https://i.stack.imgur.com/YkuCP.png" /></div>
        </div>
        
        <!-- For square display -->
        <div class="img-wrapper">
            <h3>Square</h3>
            <div class="card square">
                <img src="https://i.stack.imgur.com/YkuCP.png" /></div>
        </div>

    </body>

</html>

CSS

body {
    display: flex;
    flex-wrap: wrap;
}

.img-wrapper {
    margin-right: 2rem;
}

.card {
    height: 25rem;
    width: 25rem;
    position: relative;
    overflow: hidden;
    float: left;
}

/* My image inside the above div wrapper */

.card img {
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
}

/* To display vertical block */

.card.vertical {
    height: 25rem;
    width: 15rem;
}

.card.vertical img {
    height: 100%;
    width: auto;
}

/* To display horizontal block */

.card.horizontal {
    height: 10rem;
    width: 25rem;
}

.card.horizontal img {
    height: auto;
    width: 100%;
}

/* To display square block */

.card.square {
    height: 20rem;
    width: 20rem;
}

.card.square img {
    height: 100%;
    width: auto;
}