So i am trying to get this image to fit the size of the the other column. So basically i have a row and 2 column let’s just say it is 6 unit width each and i wonder how to make the height of the image fit the size of the other column which has text as the value.
this is the snippet of said code
<section class="home-featured">
<div class="row">
<div class="col-12 col-md-4 offset-md-2">
<img src="assets/images/Home-section.jpg" alt="Home-section" class="home-image">
</div>
<div class="col-md-4 text-start d-flex flex-column justify-content-center">
<div class="row">
<div class="col-12 mb-3">
<h1>Last A Lifetime</h1>
</div>
</div>
<div class="row main-content-description">
<div class="col-12 mb-3">
<p class="home-text-justify">A pocket watch is a classic masterpiece made from high quality material that could last a lifetime. Pocket watches are often characterized by their intricate craftsmanship, which may include ornate designs, engravings, or precious materials.</p>
</div>
</div>
<div class="row main-content-brand">
<div class="col-12">
<div class="row">
<div class="col-6 new-home main-content-brand-description">
<p>Made Of</p>
<h6 class="home-text my-3">White Crystal</h6>
<p>From Papua</p>
</div>
<div class="col-6 new-home main-content-brand-description">
<p>Manufactured By</p>
<h6 class="home-text my-3">Watches</h6>
<p>For The Best</p>
</div>
</div>
</div>
</div>
</div>
</section>
CSS Applied to the snippet
.home-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.home-text-justify {
text-align: justify;
}
This is the photo of the current code Current
This is the expectation Expectation
I also wonder do we need to resize an image we are going to put in our website? or it is actually fine to just put whatever image size and then use css to resize it?