Question

我对CSS中的图像大小调整有疑问。

我有一张1920x1080的图像。

此图片应自动调整大小以适合任何屏幕，但我无法执行此操作。

我想要的例子here

在顶部，视频开始播放，这就是我希望你成为我的页面的方式，而不是视频，而不是视频。

我的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>

div中所有名为slides的图像都应该适合任何屏幕。

Answer 1

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

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

Answer 2

你应该加入你的CSS：

Exception in thread "Validate26" java.lang.Error: Error: could not match input
at org.json.simple.parser.Yylex.zzScanError(Yylex.java:474)
at org.json.simple.parser.Yylex.yylex(Yylex.java:681)
at org.json.simple.parser.JSONParser.nextToken(JSONParser.java:269)
at org.json.simple.parser.JSONParser.parse(JSONParser.java:118)
at org.json.simple.parser.JSONParser.parse(JSONParser.java:81)
at org.json.simple.parser.JSONParser.parse(JSONParser.java:75)
at com.faris.kingvalidator.ValidateRunnable.run(ValidateRunnable.java:78)
at java.lang.Thread.run(Thread.java:745)

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

Answer 3

我建议你以这种方式使用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);
}

background-size属性做了魔术：

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

Answer 4

首先，您应该在viewport上插入元head，就像这样

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

图像使用CSS调整大小

4 个答案:

CSS