I have an image that should be fit with the container below the sub-1 class according to the below code.
I tried object-fit:cover property but it did not work It shows browser’s own image part.I want to show certain part of the image.how can I do that.
`<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
border: 1px solid red;
}
.col-1{
display: flex;
flex-direction: column;
width: 40%;
}
.sub-1{
border: 1px solid blue;
}
.sub-2{
border: 1px solid blue;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="col-1">
<div class="sub-1">
some text
</div>
<div class="sub-2">
<img src="image.png">
image should be here
</div>
</div>
<div class="col-2">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Voluptatibus quae
hic autem enim sunt deserunt officia architecto dolorum quam.
</p>
<a href="#">some link</a>
</div>
</div>
</body>
</html>