CODEWITHSUNDEEP
css
Faceit
Faceit

Reputation: 29

css images center without stretching images

I want my images center without stretching images. I'm using display block, got this snippet from stackoverflow but it doesn't work. My code:

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  position: relative;
  display: block;
    float: left;
    width:  100%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

HTML code:

<section class="customer-logos slider">
   <div class="slide"><a href="#"><img src="/images/brand/1.png" alt="Image"></a></div>
   <div class="slide"><a href="#"><img src="/images/brand/2.png" alt="Image"></a></div>
   <div class="slide"><a href="#"><img src="/images/brand/3.png" alt="Image"></a></div>
</section>

I'm using slick slider.

Added html code

Images center

Upvotes: 0

Views: 76

Answers (3)

loveJS
loveJS

Reputation: 52

This should work

Well...all the magic is done in .slick-slide You transform the image into the blocked element...And then you say centralize it. margin: 0 auto; You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins

See: https://www.w3schools.com/css/css_margin.asp

.slick-slide {
    margin: 0 20px; 
}

.slick-slide img {
    display: block;
    margin: 0 auto; 
 }

Upvotes: 0

Santosh
Santosh

Reputation: 3807

This might help you. 

.wrapper {
  display: flex;
  justify-content: space-around;
  height: 400px;
  background: #000;
  align-content: center;
  align-items: center;
}

span {
  height: 200px;
  width: 100px;
  background: #fff;
}
<div class="wrapper">
  <span style="height: 100px"></span>
  <span></span>
  <span style="height: 50px"></span>
</div>

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

If I understood you correctly, all you really need is to display the images as inline-block and then set vertical alignment.

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  display: inline-block;
  vertical-align: middle;
}
<div class="slick-slide">
  <img src="http://via.placeholder.com/100x100" />
  <img src="http://via.placeholder.com/100x50" />
  <img src="http://via.placeholder.com/100x30" />
  <img src="http://via.placeholder.com/100x100" />
</div>

Upvotes: 1

Related Questions