CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Image control all image in a website. HTML tag call image to website and CSS control this image by using img command.
1) How to control Image by using CSS?
Just write in your css file this line.
img {
width:100px;
height:100px;
border:1px solid red;
}
2) Image Width and Height control by CSS
img {
width:122px;
height:100px;
}
3) Image border control by CSS
img {
border:3px solid red;
}4) Image border radius control by CSS
img {
border:3px solid red;
border-radius:20px;
}5) Image make circle by CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.imgcircle {
border:3px solid red;
border-radius:50%;
}
</style>
</head>
<body>
<div class="imgcircle">
<img src="http://www.raajrani.com/tutorials/uploads/sample.png">
</div>
</body>
</html>
5) Image hover control by CSS
.imghover img:hover {
border-radius:50%;
opacity:0.4;
}
6) Image make thumbnail by CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.imgthumb img {
border-radius:10px;
border:1px solid #333;
background:#ddd;
padding:10px;
}
</style>
</head>
<body>
<div class="imgthumb">
<img src="http://www.raajrani.com/tutorials/uploads/sample.png">
</div>
</body>
</html>
Bootstrap Image Class for Image Responsive
Bootstrap user three image class such as .img-rounded (for rounded image), .img-circle (for circle image), .img-thumbnail (for thumbnail image)
