CSS - IMAGES

    //IMG
    <img src="pic.png" alt="Foto Ejemplo">

    //OBJECT-FIT (Not in IE) Specifies how an img or video should be resized to fit its container
    object-fit: cover; /*the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit*/
    object-fit: contain; /*the image keeps its aspect ratio, but is resized to fit within the given dimension:*/
    object-fit: fill; /*the image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit:*/
    object-fit: none; /*the image is not resized:*/
    object-fit: scale-down; /*the image is scaled down to the smallest version of none or contain*/

    //OBJECT POSITION Specifies how an img or video should be positioned with x/y coordinates inside its "own content box"

    //BORDERS

    img {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px;
        width: 150px;
    }
    img {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px;
        width: 150px;
    }

    //IMAGES
    //If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:
    img {
        max-width: 100%;
        height: auto;
    }

    //CENTER IMAGE
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    //POLAROID STYLE
    div.polaroid {
        width: 80%;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    img {width: 100%}

    //FILTER STYLES
    .blur {filter: blur(4px);}
    .brightness {filter: brightness(250%);}
    .contrast {filter: contrast(180%);}
    .grayscale {filter: grayscale(100%);}
    .huerotate {filter: hue-rotate(180deg);}
    .invert {filter: invert(100%);}
    .opacity {filter: opacity(50%);}
    .saturate {filter: saturate(7);}
    .sepia {filter: sepia(100%);}
    .shadow {filter: drop-shadow(8px 8px 10px green);}