CSS picture


May 04, 2021 04:00 CSS3


Table of contents


CSS picture

This section will show you how to use CSS to lay out pictures.


Rounded picture

Instance

Fillet pictures:

Img {
border-radius: 8px;
}

Try it out . . .

Instance

Oval picture:

Img {
border-radius: 50%;
}

Try it out . . .

Thumbnails

We use the border property to create thumbnails.

Instance

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

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

Try it out . . .

Instance

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" >
< img src="paris.jpg" alt="Paris" >
< /a >

Try it out . . .

Responsive picture

Responsive pictures automatically fit on screens of all sizes.

In an instance, you can see the effect by resetting the browser size:

CSS picture

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

Instance

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

Try it out . . .

Tip: More about web responsive design can be referred to the CSS Responsive Design tutorial.


Picture text

How to locate picture text:

Instance

CSS picture
Bottom left corner
Top left corner
Top right corner
Bottom right corner
Center

Try it out:

Top left corner . . . Top right corner . . . Bottom left corner . . . Bottom right corner . . . Centered . . .

Card-style pictures

Instance

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 out . . .

Picture filter

The CSS filter is used to add visual effects (ex: blur and saturation) to an element.

Note: Internet Explorer or Safari 5.1 (and earlier) does not support this property.

Instance

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

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

Try it out . . .

Tip: Visit the CSS Filter Reference Manual for more information.


Responsive picture album

Instance

.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 out . . .

Photo Modal (Modal)

This example shows how to combine CSS and JavaScript to render pictures together.

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

We then use JavaScript to display the modal window, and when we click on the picture, the picture appears in the pop-up window:

Instance

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

Get the picture modal box, the alt property pops up as Chinese this description
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 out . . .