使用CSS进行图像调整大小

Question

使用CSS进行图像调整大小

htmlcssresponsive-design

5

我有一个关于CSS中图片缩放的问题。

我有一张1920x1080的图片。

这张图片应该自动缩放以适应任何屏幕，但我无法做到这一点。

我想要的示例在这里。

在顶部，一个视频开始播放，这就是我希望你能够实现的效果，但是用一张图片代替视频。

我的HTML：

<body>
<div id="slides">
<ul>
    <li><img src="_img/img1.jpg"></li>
    <li><img src="_img/img2.jpg"></li>
    <li><img src="_img/img3.jpg"></li>
    <li><img src="_img/img4.jpg"></li>
</ul>
</div>

名为slides的

里所有的图片应该适配任何屏幕大小。

- Matheus Cirillo

4个回答

2

你需要在CSS中添加：

#slides img {
   width: 100%;
   height: auto;
}

这将使图像适应容器的宽度并保持纵横比。

- Jabel Márquez

2

我建议你使用背景图像来替代在 li 中使用 img，具体操作如下：

<body>
<div id="slides">
<ul>
    <li id="img1"></li>
    <li id="img2"></li>
    <li id="img3"></li>
    <li id="img4"></li>
</ul>
</div>

那么你只需要设置全局的背景属性（CSS）：

#slides li {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

并单独设置单个背景图像（CSS）

#img1 {
    background: url(the_url_1.jpg);
}
#img2 {
    background: url(the_url_2.jpg);
}

背景大小属性可以实现以下效果：

如果你将其设置为cover，你会将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内；
如果你将其设置为contain，你会将图像缩放到最大尺寸，使其宽度和高度都适合内容区域。

- shaithana

2

首先，您应该在标签中插入meta viewport，如下所示：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

如果您想让它起作用，请看下面的代码片段。

body {
  margin: 0;
  padding: 0
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0
}
#slides img {
  max-width: 100%;
  display: block /*fix inline image small gap*/
}

/*larger devices than the size of image */
@media (min-width: 1920px) {
  #slides img {
    width: 100%
  }
}

<div id="slides">
  <ul>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
    <li>
      <img src="http://lorempixel.com/1920/1080">
    </li>
  </ul>
</div>

- dippas

完美运行，只有一个问题，我要开始使用jQuery做幻灯片，所以页面每次只应显示1张图片。我该怎么做？ - Matheus Cirillo

2

你应该发一篇带有相关代码的问题，然后再提出另一个问题。在我看来，否则这个问题会变得非常混乱。但是网上有很多jQuery幻灯片展示。 - dippas

我每90分钟只能发布一次T-T。有没有办法使用CSS每次只显示1张图片？ - Matheus Cirillo

1

这是一个纯CSS示例，从快速谷歌搜索“纯CSS幻灯片”中获得。 - dippas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bnahin · Accepted Answer

尝试将<img>的width属性设置为100％，这将限制图像宽度为窗口宽度。

<li><img src="_img/img1.jpg" width="100%"></li>

Fiddle Demo

CSS

li > img {
width:100%;
}

为了优化移动用户体验，您可以设置视口标签为设备宽度，如下所示：

viewport as the device width

。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>