how to fit image inside a div? - html

I am building an instagram clone & currently working in posts so my question is that, i have created a card and inside of that i have created a div containing posts(images)
but the problem is that, when i upload images with multiple size it straches my card & it doesn't get fit inside of that div. Also my right div changes according images...
This is small image
This is big image
Code:
<div class="mx-auto w-75">
<div class="card my-3">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-8 ms-2 mb-0 ps-1 pe-0">
<div id="carouselExampleFade" class="carousel m-0 slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'images/post-1.jpg' %}" style="height:auto;" class="d-block w-100 img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="{% static 'images/profile-1.jpg' %}" style="height:auto;" class="d-block w-100 img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="{% static 'images/profile-2.jpg' %}" style="height:auto;" class="d-block w-100 img-fluid" alt="">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-sm-3 p-0">
<div class="card pt-0" style="width:325px; height:72px; padding:16px; margin-top:-1px;">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

To fit an image in a div, use the css object-fit property.
html code
<div>
<img src="abidjan.jpg" alt="Abidjan" width="400" height="300">
<div>
NB : Note the width and height attributes of the img.
CSS code
img {
width: 200px;
height: 300px;
object-fit: fill;
/* You can also use cover instead of fill but they are different */
}
The image is squished to fit the container of 200x300 pixels (its original aspect ratio is destroyed)
More info here

Related

how to add heading and text over an image carousel

I want to add a heading and text in an image carousel. When it write h1 or p tags the text goes down under text. I want to keep it in middle of my image. I am using bootstrap framework.
Here is my code:
<section>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/cover/cover-1.png" class="d-block w-100 image-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/cover/cover-2.jpg" class="d-block w-100 h-auto image-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/cover/cover-3.jpg" class="d-block w-100 image-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Please refer to the bootstrap documentation for captions on carousel here - https://getbootstrap.com/docs/4.0/components/carousel/#with-captions
If you want to place the text in middle of the image, change/add the below code in your css for carousel-caption
.carousel-caption {
position: absolute;
right: 15%;
top: 45%; // this will help in placing the content in middle vertically
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}

How do I wrap images of different resolutions in a responsive container?

I have galleries on multiple pages where the dimensions of the photos are different sizes. I have them in bootstrap carousels and I don't want them to make the dimensions of the carousel itself different, but I still want to show the whole image.
HTML:
<div id="carouselExampleControls" class="carousel slide pt-5 ps-4" data-bs-ride="carousel">
<div class="carousel-inner galleryCarousel">
<div class="carousel-item active">
<a href="http://www.bmillerequipmentsales.com/" target="_blank">
<div class="companyGallery">
<img src="../images/galleries/billmiller/Bill_Gallery_1.jpeg" class="d-block w-100" alt="...">
</div>
</a>
</div>
<div class="carousel-item">
<a href="http://www.bmillerequipmentsales.com/" target="_blank">
<div class="companyGallery">
<img src="../images/galleries/billmiller/Bill_Gallery_2.jpeg" class="d-block w-100" alt="...">
</div>
</a>
</div>
<div class="carousel-item">
<a href="http://www.bmillerequipmentsales.com/" target="_blank">
<div class="companyGallery">
<img src="../images/galleries/billmiller/Bill_Gallery_3.jpeg" class="d-block w-100" alt="...">
</div>
</a>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
CSS:
.companyGallery img {
max-width:100%;
height: auto;
}
.companyGallery {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
.galleryCarousel {
background-color: #E3E1E1;
max-width: 1280px;
height:720px;
}
I have tried something like this

Bootstrap 5 Carousel same height with different sizes

I am using Bootstrap 5 carousel to show a list of images uploaded from users, so they do not have the same height and width.
I would like to have a carousel with responsive height and scaled/filled images.
This is my HTML + CSS code (images are taken from the web, as an example):
<style>
#carouselExampleCaptions .carousel-item img {
object-fit: cover;
object-position: center;
overflow: hidden;
height:50vh;
}
</style>
<div class="card">
<div class="card-body">
<div class="row g-0">
<div class="col-md-6">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://englishlive.ef.com/blog/wp-content/uploads/sites/2/2014/07/tall-1024x1535.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://miro.medium.com/max/1400/1*NlA2fRVMV2blpuA0aPEgPA.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="http://clipart-library.com/img/1832282.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-md-6 p-2">
<ul class="list-group list-group-flush">
<li class="list-group-item"><b>ID:</b> 1</li>
<li class="list-group-item"><b>Uplodaded by:</b> User</li>
<li class="list-group-item"><b>Views:</b> 100</li>
</ul>
</div>
</div>
</div>
</div>
It works not really well since when I simply open browser console images are crushed and captions over images do not suffer changes. Same thing happens if I switch device simulator (on console).
EDIT:
The result I have after #Aryclenio Barros suggestion:
image with large width
image with larghe height
I believe what you are trying to do is:
<style>
#carouselExampleCaptions .carousel-item img {
object-fit: contain;
object-position: center;
overflow: hidden;
height:50vh;
}
</style>
With object-fit: contain you will have the same height but the width will not fill the corresponding parent div, looking like this:
The captions are not showing up because there is a configuration that put a display: none on the md breakpoint by bootstrap. Removing it will show the captions in every screen size.
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>

Sizing does not apply to images using bootstrap

Sizing property of bootstrap does not apply to the images. If I try to style them inline, everything works as planned, but whenever I try to set it as h-100, the rule does not apply to the images anymore. Can somebody please explain why h-100 is not working?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 h-100" src="img/hero-bg_1.jpg" alt="First slide">
<h1> Denim Jackets </h1>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/hero-bg_2.jpg" alt="Second slide" style="height: 100vh">
<h1> text on the second page </h1>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/hero-bg_3.jpg" alt="Third slide" style="height: 100vh">
<h1> text on the third page </h1>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Thank you!
In your case you are applying h-100 only to the image of active carousel. It didn't get applied because your parent element don't have a fixed height. Set a height to active class and check.
.active{
height:100vh;
}
I'm sorry in that case you can't apply width or height directly to the image tag.
Use the structure in the following way.
<div class="h-25 d-inline-block" style="width: 120px;
background-color: rgba(0,0,255,.1)"> <img class="rounded mx-auto
d-block" src="img/hero-bg_2.jpg" alt="Second slide" style="height:
100vh"></div

Creating a card as a complete link

I'm using materialize cards for my webpage, the idea is to use the cards as menus so when a person click in any part of the card the link should open. But it is only working by clicking in the image and/or in the text but no in any other part of the card.
This is the code:
<div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
The code above I know is going to work only with the image and the text. But I tried to make all the card as a link like
<a href=""> <div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
But it didn't work.
try making an href tag absolute on every card try this :
div.col{position:relative}
.fullcard{position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:inline-block;
z-index: 99999;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://pixdaus.com/files/items/pics/6/20/107620_cb8da068c718b9e6aa7aa0bcbc68d18f_large.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
If you set the a to be style display:block and then wrap everything in it - you should be able to click anywhere in the card and navigate to the new link. The reason why you currently have to click on the elements is that a's are inline level elements and only respond to direct interaction on them - you need to set it to become a block level element and to therefore respond to any interaction within that block.
I added a couple of style rules to highlight this (such as border and padding) and doing it this way means that you only need to have a single a in each card. Note that I don't have your image - so the alt text shows up here.
.display-card {
border: solid 1px #333;
}
.nav-link {
display:block;
padding:15px
}
<div class="col l6 m12 s12 display-card">
<a href="signup.html" target="_blank" class="nav-link">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg" alt="image">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4"> RoboTico <i class="material-icons right">build</i></span>
</div>
</div>