Question

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

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

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

Answer 1

使用 object-fit ，例如：

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

https://jsfiddle.net/x2qrc5un/

Answer 2

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

Answer 3

或者像个背景。

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

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

3 个答案: