1. Home
  2. CSS image

CSS image

This chapter will show you how to use CSS layout image.

Fillet Photos

Examples

Fillet Images:

img {
border-radius: 8px;
}

Examples

Oval picture:

img {
border-radius: 50%;
}

Thumbnails

We use the border property to create thumbnails.

Examples

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

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

Examples

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>

Responsive image

Responsive image will automatically fit a variety of screen sizes.

Example, you can reset your browser to see the effect size:

Norway

If you need the freedom to scale the image, and the image to enlarge the size of not greater than the maximum value of the original, you can use the following code:

Examples

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

Tip: Web content can be more responsive design reference CSS responsive design tutorials .

Picture Text

How to locate the image text:

Examples

Norway
Lower left corner
The upper left corner
Upper right corner
Bottom right corner
Center

try it:

The top left corner >> the upper right corner » lower left corner» bottom right corner >> center >>

Card-image

Examples

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

Image Filters

The CSS filter attribute to add elements with visual effects (for example: Fuzzy and saturation).

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

Examples

Edit all colors to black and white pictures (100% gray):

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

Tip: Visit the CSS filter Reference Manual for more content.

Responsive Image Gallery

Examples

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

Pictures Modal (modal)

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

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

We then use JavaScript to display a modal window when we click, the picture will be displayed in a pop-up window:

Examples

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

// Get the picture frame mode, alt image attributes as described in the present Chinese pop
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";
}

Hot Tutorials

Contact US