CSS Images

This chapter will introduce how to use CSS to layout images.

Rounded Images

Example

Rounded corner image:

img {
    border-radius: 8px;
}

Try it Yourself »

Example

Oval image:

img {
    border-radius: 50%;
}

Try it Yourself »

Thumbnails

We useborderAttributes to create thumbnails.

Example

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

<img src="paris.jpg.html" alt="Paris">

Try it Yourself »

Example

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="paris.jpg.html">
  <img src="paris.jpg.html" alt="Paris">
</a>

Try it Yourself »

Responsive Images

Responsive images automatically adapt to screens of various sizes.

In the example, you can resize the browser to see the effect:

Norway

If you need to freely scale images, and the enlarged size of the image is not larger than its original maximum value, you can use the following code:

Example

img {
    max-width: 100%;
    height: auto;
}

Try it Yourself »

Tip:For more content on Web responsive design, you can refer toCSS Responsive Design Tutorial。

Image Text

How to position image text:

Example

Norway
bottom-left corner
top-left corner
top-right corner
bottom-right corner
Center

Try it:

Top-left corner » Top-right corner » Bottom-left corner » Bottom-right corner » Center »

Card-style image

Example

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%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

Try it Yourself »

Image Filters

CSS filterThe attribute is used to add visual effects to elements (e.g., blur and saturation).

Note: Internet Explorer Or Safari 5.1 (and earlier versions)This attribute is not supported.

Example

Change the color of all images to black and white (100% grayscale):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Try it Yourself »

Tip:VisitCSS Filter Reference ManualView more content.

Responsive image gallery

Example

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

Try it Yourself »

Image Modal

This example demonstrates how to combine CSS and JavaScript to render images together.

First, we use CSS to create a modal window (dialog box), which is hidden by default.

Then, we use JavaScript to display the modal window. When we click an image, the image will be displayed in the pop-up window:

Example

// Get the modal window
var modal = document.getElementById('myModal');

// Get the image modal; the alt attribute is used as the text description in the image popup
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

Try it Yourself »
other extensions