I want to make the image almost half the height it is now but it should cover the whole image not the zoomed part only. How do i do it?
HTML code
<section class="Details">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="Jeans.jpg" alt="">
</div>
</section>
CSS
.Details {
display: flex;
}
.sectionimg {
width: 50%;
height: 10%;
}
See the modified example below. I'd suggest you do a research about how flex layout works and how image properties work in them.
.Details {
display: flex;
}
.sectionimg {
flex: 1 0 50%;
}
.sectionimg img {
max-width: 100%;
}
<section class="Details">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://i.stack.imgur.com/Hc97v.png" alt="">
</div>
</section>
Related
How do I fit the whole image with borders as there is some space below it. AnyHelp would be appreciated, thanks . I have attached my code below, please refer it .
.Details {
margin-top: 100px;
}
.flexitems {
display: flex;
margin: 10px 100px 30px 100px;
width: 70%;
margin-left: 210px;
}
.sectionimg {
/*Flex-grow flex-shrink flex-basis*/
flex: 1 1 50%;
margin-right: 20px;
border: 4px solid rgb(0, 0, 0);
border-radius: 10px;
}
.flexinvert {
flex-direction: row-reverse;
}
.sectionimg img {
max-width: 100%;
}
.sectionhead {
font-size: 30px;
}
<section class="Details">
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="Jeans.jpg" alt="">
</div>
</div>
<div class="flexitems flexinvert">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="mainpic.png" alt="">
</div>
</div>
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="shirt.jpg" alt="">
</div>
</div>
</section>
You can try to object fit image and fullwidth its' height.
.sectionimg img {
max-width: 100%;
object-fit: cover;
height: 100%
}
All you need to do is specify height: 100%; to .sectionimg img so the image takes the full width and height of the parent.
.Details {
margin-top: 100px;
}
.flexitems {
display: flex;
margin: 10px 100px 30px 100px;
width: 70%;
margin-left: 210px;
}
.sectionimg {
/*Flex-grow flex-shrink flex-basis*/
flex: 1 1 50%;
margin-right: 20px;
border: 4px solid rgb(0, 0, 0);
border-radius: 10px;
}
.flexinvert {
flex-direction: row-reverse;
}
.sectionimg img {
max-width: 100%;
height: 100%;
}
.sectionhead {
font-size: 30px;
}
<section class="Details">
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
<div class="flexitems flexinvert">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
</section>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want the image to be over the paragraph, but they aren't in this code. is it enough to place elements below each other in html and they will be displayed below each other or not? Is the dosplay flex and aligning affecting the position so that's why the paragraphs aren't below the images?
.wrapper {
display: flex;
width: 100%;
}
.div {
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
}
<div class="wrapper">
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
</div>
</div>
You can force a specific order on flex-items using the order property. Also set flex-direction to column to ensure your elements are stacked vertically.
.wrapper {
width: 100%;
}
.div {
display: flex;
flex-direction: column;
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
order: 1;
}
p {
order: 2;
}
<div class="wrapper">
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
</div>
I'm a beginner Web Developer and I've recently started using Flexbox.
I find it is a great tool to use however I have a slight problem.
I have an image I want to put on my site, with a column of text beside it to the right.
As you can see from the code below I have created a wrapper div, with two nested divs inside it.
I have set the display attribute to 'flex' in the wrapper div and set the flex property to '1' for both of the divs inside. I thought this would make both of my divs take up 50% of the space each, but instead it seems like the image takes up more space than it should.
I've used an example image from Pexels. I'm wondering if the actual size of the raw image has an affect on this? For example do I have to manually resize all my photos before putting them on a site, or is there a way to have the image take up 50% of the width at all times, while having the text take up the other 50%, using flexbox?
Sorry if this post is hard to understand. Appreciate your help!
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
Try this:
.wrapper {
display: flex;
border: 3px solid red;
}
.image-div {
flex: 1;
background-color: red;
width: 100%;
}
.image-div>img {
width: 100%;
}
.text-div {
flex: 1;
background-color: yellow;
width: 100%;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
</p>
</div>
</div>
You just have to set the width of the image-div and the text-div to 100%. This way, they will take 50% of the screen width.
Next, we have to set the width of the image inside the image-div to 100%. This way, it will take the whole width of it's parent div. And the same will be for the text div.
Hope it helps
Adding image width in your CSS fixes the issue:
.image-div img { width: 100%; }
You need to set a max-width and height for your image like this:
.image-div img {
max-width: 100%;
max-height: 100%;
}
Heres the example:
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.image-div img {
max-width: 100%;
max-height: 100%;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?cs=srgb&dl=silhouette-of-mountain-under-cloudy-sky-during-sunset-4403924.jpg&fm=jpg">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
Set your image as position: absolute, stretched to the full extent of it's parent DIV element, and use object-fit to adapt the actual image to a desired value like contain or cover.
Doing so the image will adapt to the area which size is dictated by the text content in the other flex: 1 DIV element:
.wrapper {
display: flex;
border: 3px solid red;
}
.wrapper>* {
position: relative;
flex: 1;
}
.image-div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="image-div">
<img src="//placehold.it/300x400&text=Some+image">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
I have three divs in one container div. Second of them has got only text and it's height is dynamic depending of text height. First and third has got images and I want to fill out the rest of height that those 3 divs have the same height. How to set height of image to fill out the rest of remaining height??
When I set height 100% to image and parent div has got e.g. 600px , image is getting 600px too and it's overflowing content.
.offer-container {
display: flex;
justify-content: space-between;
> div {
width: 30%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
EDIT
<div className='offer-container'>
<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum hic a nulla debitis adipisci cupiditate
velit deleniti sint obcaecati? Ex quia illum id facere nulla dolores, cupiditate veniam explicabo
excepturi?
</p>
<div>
<img src='/images/bgc.png' alt='' />
</div>
</div>
<div>text...</div>
<div><img src='/images/bgc.png' alt='' /></div>
</div>
Hey this would solve your problem:
.parent{
display: flex;
}
.child {
width: 350px;
}
.class-1 {
display: flex;
flex-direction: column;
}
#image{
width: 90%;
height:100%;
overflow: hidden;
flex-grow : 1;
position: relative;
}
#image img {
width: 100%;
height: auto;
position:absolute;
}
<div class="parent">
<div class=" child class-1">
<div class="text">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj lkasjfklasdj f</p>
</div>
<div id="image">
<!-- <div class="for-image" style = "background-image:url('https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg')"> -->
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div class=" child 2">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj lkasjfklasdj fasdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj ldj flksadj flksadj flkasdj flkasdjfklasdj flkasdsadsads a das d aasdsadsaddasd as asd asd s ds das das das d ads asd asasdjflkas jflgsdvxzvxzcvzxcvzxv</p>
</div>
</div>
if you want to fiddle around here is the codepen link
Flex-grow fixed this problem
.parent{
display: flex;
justify-content: space-between;
}
.parent > div {
width: 48%;
}
.parent > div:first-child {
display: flex;
flex-direction: column
}
.image{
flex-grow: 1;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="parent">
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
<div class="image">
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
</div>
</div>
So I tried to play a bit with my code and was looking on many forums to see if the answer was already given. I didn't find anything yet. I wanted to know how to align the buttons divs to each other, like this :
At this time, my code is this :
.directeur {
width: 50%;
float: left;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.directeur a>img {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
Can someone help me ? I created other Divs, tried Vertical-Align and Inline-Block. I want the Green Button Rectangle to align like this in my code. At the moment, they are not align because of the height of the text box.
Have you tried this.
.custom_element{
position: absolute;
left:0;
right:0;
text-align: center;
}
Replace custom_element with your required element.
This is a job for Flexbox!
Wrap you whold code in a flexbox container, which will ensure all your .directeurs have the same height
Use flexbox for your .directeur, with flex-direction: column to arrange sub-elements vertically.
Set margin-top: auto on your last element (.directeur a) to ensure it will always be a the very bottom of its parent.
.directeurs {
display: flex;
}
.directeur{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.directeur a {
margin-top: auto;
}
.directeur a > img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeurs">
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
</div>
Set a min-height for the Lorem ipsum parts of this to make them the same:
.directeur{
width: 50%;
float: left;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
min-height: 225px;
}
.directeur a>img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
Or you can use some javascript to measure the tallest one then make the other one the same height on page load, something like Equalise.
You can use display:table-cell and position. I have taken the liberty of adding a wrapper around the two .directeurs. See it it works for you.
.directeur-wrapper{
display:table;
}
.directeur{
display:table-cell;
width:50%;
padding:20px 20px 80px;
position:relative;
}
.directeur img{max-width:100%;}
.directeur a{position:absolute; bottom:0;}
<div class="directeur-wrapper">
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
</div>