Latest web development tutorials

CSS image

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

Fillet Photos

Examples

Fillet Images:

img {
border-radius: 8px;
}

try it"

Examples

Oval picture:

img {
border-radius: 50%;
}

try it"

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">

try it"

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>

try it"

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

try it"

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

try it"

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

try it"

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

try it"

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

try it"