Question

我希望我的图像不会拉伸图像。我正在使用显示块，从stackoverflow获取此片段但它不起作用。我的代码：

.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>

我正在使用光滑的滑块。

添加了html代码

Images center

Answer 1

如果我理解正确，您真正需要的是将图像显示为Map<Integer,List<String>> MapOf_words_arrays = new HashMap<Integer,List<String>>(); Iterator<List<String>> iterator = MapOf_words_arrays.values().iterator(); ArrayList<String> data = new ArrayList<String>(); List<String> tempList; while(iterator.hasNext()){ tempList = iterator.next(); for(String item: tempList){ data.add(item); } } // Here is your array with all strings. String[] array = data.toArray(new String[]{});，然后设置垂直对齐。

inline-block

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  display: inline-block;
  vertical-align: middle;
}

Answer 2

这应该有效

嗯......所有的魔法都是在.slick-slide中完成的你将图像转换为被阻挡的元素......然后你说它集中了它。保证金：0自动; 您可以将margin属性设置为auto，使元素在其容器中水平居中。

然后元素将占用指定的宽度，剩余的空间将在左右边距之间平均分割

请参阅：https://www.w3schools.com/css/css_margin.asp

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

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

Answer 3

这可能会对你有所帮助。

＆＃13;

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

＆＃13;

<div class="wrapper">
  <span style="height: 100px"></span>
  <span></span>
  <span style="height: 50px"></span>
</div>

＆＃13;

css图像中心没有拉伸图像

3 个答案: