Hình ảnh W3.CSS
Làm tròn:
Khoanh tròn:
Giáp:
Chữ:
Hình ảnh được làm tròn
Lớp w3-round thêm các góc tròn vào hình ảnh:
Thí dụ
<img src="img_snowtops.jpg" class="w3-round" alt="Norway">
Hình ảnh được khoanh tròn
Lớp w3-circle định hình một hình ảnh thành một hình tròn:
Thí dụ
<img src="snowtops.jpg" class="w3-circle" alt="Alps">
Hình ảnh có viền
Lớp w3-border thêm đường viền xung quanh hình ảnh:
Thí dụ
<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">
Hình ảnh dưới dạng thẻ
Bọc bất kỳ lớp nào trong số các lớp w3-card- * xung quanh phần tử <img> để hiển thị nó dưới dạng thẻ (thêm bóng):
Simon
Ông chủ của tất cả các ông chủ
Thí dụ
<div class="w3-card-4">
<img src="img_avatar.png"
alt="Person">
</div>
Văn bản Hình ảnh
Position the text in an image with the w3-display-classes:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Top Middle
Bottom Middle
Example
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>
Responsive Images
An image can be set to automatically resize itself to fit the size of its container.
If you want the image to scale down if it has to, but never scale up to be larger than its original size, use the w3-image class.
Example
<img src="img_lights.jpg"
alt="Lights" class="w3-image">
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100%:
Example
<img src="img_lights.jpg"
alt="Lights" style="width:100%">
If you want to restrict a responsive image to a maximum size, use the max-width property:
Example
<img src="img_lights.jpg"
alt="Lights" style="width:100%;max-width:400px">
Opacity
The w3-opacity classes make images transparent:
Normal
w3-opacity-min
w3-opacity
w3-opacity-max
Example
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">
Grayscale
The w3-grayscale classes add a grayscale effect to an image:
Normal
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Example
<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">
Note: The w3-grayscale classes are not supported in IE 11 and earlier versions.
Sepia
The w3-sepia classes add a sepia effect to an image:
Normal
w3-sepia-min
w3-sepia
w3-sepia-max
Example
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">
Note: The w3-sepia classes are not supported in IE 11 and earlier versions.
Hover Effects
You can also add special effects on hover/mouse-over.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Example
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">
Opacity Off
Add transparency on hover:
Remove transparency on hover:
The w3-hover-opacity class adds transparency to the image on mouse-over, and the w3-hover-opacity-off class removes transparency on mouse-over.
Example
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">
Constructing a Photo Album
In this example we use the W3.CSS Responsive Grid system to create a photo album that looks good on all devices. You will learn more about this later.
Summer 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Example
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>