CSS ( Cascading Style Sheets)
- CSS Introduction
- CSS Syntax
- CSS Selectors
- How To Add CSS
- CSS Comments
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height - Width
- CSS Box Model
- CSS Outline
- CSS Text
- CSS Links
- CSS Lists
- CSS Tables
- CSS Display
- CSS Max-width
- CSS Position
- CSS Overflow
- CSS Float
- CSS Inline-block
- CSS Align
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Image Gallery
- CSS Attr Selectors
- CSS Forms
- CSS Counters
- CSS Website Layout
- CSS !important
- CSS Rounded Corners
- CSS Border Images
- CSS Backgrounds
- CSS Colors
- CSS Color Keywords
- CSS Gradients
- CSS Radial Gradients
- CSS Text Effects
- CSS Web Fonts
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Tooltip
- CSS Image Reflection
- CSS The Object-fit
- CSS Object-position
- CSS Button
- CSS Pagination
- CSS Multiple Columns
- CSS User Interface
- CSS Variables
- CSS Box-sizing
- CSS Media Queries
- CSS Flexbox
CSS object-position
The Image
Look at the following image from Paris, which is 400x300 pixels.
Next, we use object-fit: cover;
to keep the aspect ratio and to fill the given dimension. However, the image will be clipped to fit, like this.
img {
width: 200px;
height: 300px;
object-fit: cover;
}
width: 200px;
height: 300px;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover;</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover;</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Using The Object-position Property
Let's say that the part of the image that is shown, is not positioned as we want. To position the image, we will use the object-position
property.
Here we will use the object-position
property to position the image so that the great old building is in center.
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP