CODEWITHSUNDEEP
cssbootstrap-4
Cesar Bellic
Cesar Bellic

Reputation: 61

achieve 3 images exact size CSS

So I´m having trouble fitting 3 images in the same row ,This is what I need..

The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks

HTML:

           <div class="first-slot">
             <div class="masonry-box post-media">
               <img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
                 <div class="shadoweffect">
                   <div class="shadow-desc">
                    <div class="blog-meta">
                     <span class="bg-orange"><a href="category-01.php" title="">'.$row['categoria'].'</a></span>
                      <h4><a href="single.php?id='.$row['id'].'" title="">'.$row['titulo'].'</a></h4>
                     <small><a href="single.php?id='.$row['id'].'" title="">'.$row['fecha'].'</a></small>
                     <small><a href="single.php?id='.$row['id'].'" title="">'.$row['autor'].'</a></small>
                    </div>
                   </div>
                 </div>
             </div>
           </div>

CSS:

    .first-slot {
    float: left;
    width: 65%;
    height: 35%;
}

.last-slot,
.second-slot {
    float: left;
    width: 35%;
    height: 28%;
}

Bootstrap

    .img-fluid {
  max-width: 100%;
  height: auto;
}

Upvotes: 0

Views: 48

Answers (1)

Gimnath
Gimnath

Reputation: 1070

I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need. PS: dnt forget to include bootstrap link in your project file

 .imgItem{

        display: inline-block;
        margin: 10px;
    }
    .imgContainer{
        display: flex;
    }


<div class="row">
      <div class="col imgContainer" >
            <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
                </div>
           <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
           </div>
           <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
           </div>
       </div>
    </div>

Upvotes: 1

Related Questions