In this article we will show you the solution of CSS image size scale to fit, the Cascading style sheet or CSS is used to add style to the HTML.
We are going two use two different methods to image size scale to fit in CSS - By max-height and max-width property or by object-fit property.
Step By Step Guide On CSS Image Size Scale To Fit :-
Method 1
In this method, we are going to use max-height and max-width properties. Let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title>CSS image size scale to fit</title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
img {
max-width: 100%;
max-height: 100%;
}
.image {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS image size scale to fit </p>
<div class="image">
<img src="https://cdn.pixabay.com/photo/2013/08/20/15/47/poppies-174276_960_720.jpg" alt="">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with a class “image”, and adding an image URL into it.
- Now create a <style> tag into the <head> tag to add CSS on this HTML file.
- Addressing the class “image” and adding height and width.
- Select the img tag, adding the max-height and max-width properties to 100%.
Method 2
In this method, we are going to use the object-fit property.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title>CSS image size scale to fit</title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
img {
object-fit: cover;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS image size scale to fit </p>
<div class="image">
<img src="https://cdn.pixabay.com/photo/2013/08/20/15/47/poppies-174276_960_720.jpg" alt="" style="height: 200px; width: 200px;">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with a class “image”, and adding an image URL into it. Into that image URL adding add height and width by <style> tag.
- Now create a <style> tag into the <head> tag to add CSS on this HTML file.
- Select the img tag, set the “object-fit” property to cover
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give CSS image size scale to fit.
I hope this article on CSS image size scale to fit helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
