<article class="cards">
<article class="card">
<img class="card-image" src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<img class="card-image" src="https://picsum.photos/320/240" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet.</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<img class="card-image" src="https://picsum.photos/1024/768" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nam.</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
</article>
Depending on whether you're using flex, grid or block elements - the issue could be coming from various properties. Presuming you have no CSS added in, in the <head> of your html, create a style block like <style></style>where you may want to add your styling properties, or you could extract these to an external file if you wish to. Have a look here for more information about css and how to use it .
Now back to your question, one way would be to simply add height and width properties to the <img /> tags so you'd do something like
img{
width: 300px;
height:200px;
object-fit:contain;
}
object-fit: contain makes sure the image doesn't get stretched.
If you'd like to see other possible solutions (such as grid or flex) please update your question
You can add another div in img tag and give some specific height on it. also in your img give also height same as the div wrapper in your img. and do object-fit cover on it. check the code below
.cards {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px
}
.card-image-wrapper {
border: 1px solid yellow;
height: 300px; /* add height to image wrapper */
}
.card-image {
width: 100%;
height: 300px; /* same height as card image wrapper */
object-fit: cover;
object-position: center;
}
<article class="cards">
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="https://picsum.photos/320/240"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="https://picsum.photos/1024/768"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
</article>
hope it helps and give you little idea.
Related
<div class="row">
<div class="col-lg-3 " style="border: groove;">
<p class="circle col-xs-1 center-block">01</p>
<h3>trending courses</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-3" style="border: groove;">
<p class="circle text-center">02</p>
<h3>books&library</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis
tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit
veritatis quam deleniti? Quasi dolor, asperiores ut cumque laboriosam accusamus eveniet esse. Officiis
quidem perferendis qui.</p>
</div>
<div class="col-lg-1">
</div>
<div class="col-lg-3" style="border: groove;">
<p class="circle">03</p>
<h3>certified teachers</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
</div>
Used bs-5,bootstrap.bundle.min.css
This is the below output for this code
3. This is the code of css
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
background: purple;
border: 3px solid #000;
display: flex;
color: #fff;
text-align: center;
font: 28px arial, sans-serif;
}
I tried various ways of flex, it did not work until I change margin
Please help me, why this is not working
text: center on your .circle element can't work because it will only center text inside the element and not the element itself.
If what you want to center the circle then you have to set margin to auto for the element .
Or if you want to do it using flexbox then you have to wrap your p element with a div which has display: flex and justify-content: center styles.
Here's a flexbox-only solution:
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
background: purple;
border: 3px solid #000;
display: flex;
color: #fff;
text-align: center;
font: 28px arial, sans-serif;
}
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-3 " style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle col-xs-1 center-block">01</p>
</div>
<h3 class="text-center">trending courses</h3>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-3" style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle text-center">02</p>
</div>
<h3 class="text-center">books&library</h3>
<p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit veritatis quam deleniti? Quasi dolor, asperiores
ut cumque laboriosam accusamus eveniet esse. Officiis quidem perferendis qui.</p>
</div>
<div class="col-lg-1">
</div>
<div class="col-lg-3" style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle">03</p>
</div>
<h3 class="text-center">certified teachers</h3>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
</div>
If you wrap each circle with a flexbox that has justify-content: center;, any items in the flexbox will be centered horizontally.
EDIT: OP wanted to center paragraph text as well.
Use it to center all elements:
<div class="col-lg-3 d-flex flex-column align-items-center justify-content-center"></div>
Try using margin:auto in css or m-auto in bootstrap
Using Css
.circle {
margin:auto
}
Using BootStrap add a class name to the div m-auto
<p class="circle text-center m-auto">02</p>
Using Flex
Add a class called dop to parent and chi to child circle
<div className="col-lg-3 dop" style={{ border: "groove" }}>
<p className="circle text-center chi">02</p>
CSS:
.dop {
display: flex;
flex-direction: column;
}
.chi {
align-self: center;
}
Try This
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 1 year ago.
JSFiddle
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.imgur.com/JhOKdVb.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- game-pad icon img -->
<img src="https://i.imgur.com/c5O6IOS.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.imgur.com/JhOKdVb.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
</div>
</div>
.container{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.row:before,.row:after{
content: '';
display: block;
clear: both;
display: table;
}
.col-6{
width: 50%;
float: left;
}
.card{
margin-bottom: 50px;
}
img{
max-width: 100%;
height: auto;
}
I created the columns using the CSS float property. No framework! Everything is working fine but the last column in the row isn't floating left. can anyone explain?
Interesting Fact:
I'm using only two icons called Plane and Gamepad. Interestingly when I changed the Gamepad icon with the 'Plane' icon, it fixes the problem! Still can't figure out why this is happening.
You need to use:
float: right;
That's what you need.
image doesnt fit parent element
here is the full code
https://jsfiddle.net/601q9j7c/1/
<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
If you don't set any defined width in either the CSS or the <img> tag, the image will be displayed at full size regardless of its container. This is your issue. So you need to ensure the image is at maximum 100% of it's parent's width.
HTML only
<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" width="100%"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
It is best practise to do this with CSS rather than directly into HTML, but you have not shown any CSS in your question.
A CSS example is below:
CSS example
.bgimg > img {
max-width: 100%;
width: 100%;
height:auto;
}
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
First of all ! your spelling your class is wrong, that's why image is not fitting.
Make the width of the image to be 100% and its height is auto so that is don't stretch but then your image may be come out of parent container make there overflow:hidden
.cards {
display: flex;
justify-content: center;
}
.card {
width: 60%;
justify-content: center;
display: grid;
grid-template-columns: 50% 50%;
box-shadow: 10px 0px 20px rgba(0,0,0,0.08);
height: 25rem;
}
.img-data {
height: 100%;
z-index: 1;
background-color: salmon;
display: grid;
grid-template-rows: 50% 50%;
}
.bgimg {
overflow: hidden;
}
.bgimg img {
height: auto;
width: 100%;
}
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
This should work and is dynamic:
This gives the image an inherited width and height, which means that it replicates the width of the previous object. It is given with the property style="width: inherit; height: inherit;"
.bgimg {
width: 500px; /*Or whatever you want...*/
}
/* this CSS can be directly inserted in a tag with style="width: 500px;"*/
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"><!--*NOTE: you wrote <div clas="bgimg">(you missed an 's')--><img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" style="width: inherit; height: inherit;"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
Hope this helps!
What I am trying to do is to get the red text just after the blue title of each boxes.
It seems I will have to add another div? I have added and modified the posotion of .card-indus img but the outcome is never what I want.
Do you know why it does not work even when I apply a position:relative; to .industries .container-industries .card-indus img? Do you have any suggestions?
.industries .container-industries .card-indus {
position: relative;
border: red solid 1px;
color: white;
max-height: 300px;
overflow: hidden;
height: 100%;
}
.industries .container-industries .card-indus img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.industries .container-industries .card-indus .text-image {
position: absolute;
color: red;
left: 0;
top: 0;
}
.industries .container-industries .card-header {
height: 4rem;
display: flex;
align-items: center;
background: rgba(82, 134, 236, 0.6);
}
.industries .container-industries .card-header p {
margin-left: 1rem;
}
<div class="industries">
<div class="industries-icons">
<h2> Our Industries</h2>
<span class="border-1"></span>
<div class="container-industries">
<div class="card-indus">
<div class="card-header">
<p>Banking</p>
</div>
<div class="card-content">
<img src="../images/services/finance.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Admin</p>
</div>
<div class="card-content">
<img src="../images/services/admin.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Law</p>
</div>
<div class="card-content">
<img src="../images/services/law.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Retail</p>
</div>
<div class="card-content">
<img src="../images/services/retail.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Telecom</p>
</div>
<div class="card-content">
<img src="../images/services/telecom.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
</div>
</div>
</div>
You would have to do two things:
1- move text-image div before the img div.
2- remove position: absolute; from img as you mentioned.
.industries .container-industries .card-indus {
position: relative;
border: red solid 1px;
color: white;
max-height: 300px;
overflow: hidden;
height: 100%;
}
.industries .container-industries .card-indus img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.industries .container-industries .card-indus .text-image {
color: red;
left: 0;
top: 0;
}
.industries .container-industries .card-header {
height: 4rem;
display: flex;
align-items: center;
background: rgba(82, 134, 236, 0.6);
}
.industries .container-industries .card-header p {
margin-left: 1rem;
}
<div class="industries">
<div class="industries-icons">
<h2>Our Industries</h2>
<span class="border-1"></span>
<div class="container-industries">
<div class="card-indus">
<div class="card-header">
<p>Banking</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/finance.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Admin</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/admin.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Law</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/law.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Retail</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/retail.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Telecom</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/telecom.jpg" />
</div>
</div>
</div>
</div>
</div>
I have an element with an image and some text next to it, The content is centered inside the parent.
When I try to add more elements after the image and the text, As you see the green text with red border overflows the parent .about and goes to the next parent .contact-us
Here is a fiddle to view and edit the code:
https://jsfiddle.net/04rmefx7/
Here is the code:
body,
html {
height: 100%;
}
.inline-block {
display: inline-block;
}
/* Start about */
.about {
background-color: #dad04a;
position: relative;
height: 100%
}
.about img {
height: 100px;
}
p{
border: 4px solid red;
color: green;
font-weight: bold;
}
/* End about */
/* Start contact-us */
.contact-us {
background-color: #eeb03c;
}
/* End contact-us -->
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Start about -->
<div class="about text-center">
<div class="inline-block">
<img class="pull-left" src="https://placehold.it/600">
<div class="pull-left text-left">
<h4 class="inline-block">Heading</h4>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="clearfix"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et velit officia alias harum nam illum pariatur deleniti reprehenderit, aliquam, commodi iure modi, facilis error dolorum doloribus. Porro, hic explicabo dolores. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Dolore dolor explicabo quas, est, iure non repellendus eaque, nemo eum repudiandae voluptatem rem quos iste a. Non nisi aliquid consequuntur. Libero!</p>
</div>
<!-- End about -->
<!-- Start contact-us -->
<div class="contact-us text-center">
<h2>Contact us</h2>
</div>
<!-- End contact-us -->
Does it work for you to remove height: 100% from .about?