在不拉伸图像的情况下增加图像的高度

时间:2019-01-05 21:35:47

标签: css css3

我有一张幻灯片的图像宽度为100%。图片为1600x380。 问题是,当我测试移动格式时,图像的高度很小。我需要仅在移动设备中将高度设置为更高。

我尝试设置高度和宽度,但是它显示了拉伸后的图像。

如何在不拉伸图像的情况下增加图像的高度?我想放大图片

3 个答案:

答案 0 :(得分:0)

使用 object-fit ,例如:

docker run -e SERVER_PORT=9090 -p 9090:9090 messenger-auth-auth


https://jsfiddle.net/x2qrc5un/

答案 1 :(得分:0)

使用 @media查询来检测用户何时使用移动设备(或更小的屏幕,可以在此处找到更多信息:https://www.w3schools.com/css/css_rwd_mediaqueries.asp)。然后只需将图像的 width 属性设置为 auto 。我希望这就是您想要的。

答案 2 :(得分:0)

或者像个背景。

.img {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  display:block;
  background-image: url('http://www.canalvie.com/polopoly_fs/1.1805232.1467990211!/image/chat-siamois.jpg_gen/derivatives/cvlandscape_670_377/chat-siamois.jpg');
}
<div class="img"></div>