无法使用CSS调整图像大小

Question

我正在尝试使用我的CSS调整图像大小，因为我必须为不同的媒体查询编写不同的css。所以这是我在这个stackoverflow上找到的各种方法，并尝试在CSS上调整我的图像大小。

首先我尝试插入div。

<div id="images"><img src="image/s1.jpg" name="slide"></div>

CSS

#images{
width:100%;
height:150%;
}

但它没有改变。

其次，我使用了课程

<img src="image/s1.jpg" name="slide" class="images">

CSS与顶部

相同

#images{
width:100%;
height:150%;
}

我在同一页面上的其他CSS工作正常，只是它不适用于图像。有没有办法让我用CSS调整图像大小？

Answer 1

您定位的是容器元素，而不是img标记，因此您的img不会调整大小，因此请使用此

#images > img {
   /* Styles */
}

其次，我使用了课程，但您仍在使用#images这是一个id选择器，因此您需要.images .这是一个class选择器而非#。

.images {
   /* Styles */
}

Answer 2

这样可行

#images > img {
    width:100%;
    height:150%;
}

working demo

发生了什么：您已将css分配给div标记，它应该是div的img标记。因此#images > img会分配它到div的img标签!!

Answer 3

使用.images班级选择器<img src="image/s1.jpg" name="slide" class="images">

.images{
  width:100%;
  height:150%;
 }

而不是

#images{
  width:100%;
  height:150%;
}

Answer 4

试试这个：

#images img {
  width:100%;
  height:150%;
}

Answer 5

使用 对于第一种情况使用：

#images > img {
  width:100%;
  height:150%;
}

对于第二种情况使用：

img.images {
  width:100%;
  height:150%;
}

Answer 6

<强> HTML

  <div>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSqqEKVYrUqwTWgHCUeV26xUokzezlKVjlf6S9tV0fIvgMF_oR4"
name="slide" id="images" />
</div>

<强> CSS

#images{
width:100%;
height:150%;
}

DEMO HERE..!!

Answer 7

在css的第一个案例中

#images{
    width:100%;
    height:100%;
}

您只是调整图像所在的div的大小。

请注意，您在第一种情况下使用了#images

在css的第二个案例中 您正在调整图像的大小，但使用“图像”类而不是ID

所以

#images img{
  width:100%;height:150%;
}

对于第一种情况会这样做。

或

.images{
      width:100%;height:150%;
    }

第二种情况。

Answer 8

在第一个示例中，您只是调整div的大小。在第二个示例中，img元素具有class属性，但CSS包含id选择器。为图像指定一个id属性，其值为“images”（假设您只有一个要设置样式的图像），

<img src="image/s1.jpg" name="slide" id="images">

或更改CSS以使用class选择器而非id选择器（用于样式化许多图像）：

.images {
    width:100%;
    height:150%;
}

Answer 9

尝试在此div上制作背景图片。这很有用。

<div class='images'></div>

---

css代码：

.images{
width:100px;height:100px;
background-image:url('yourimage.jpg');background-size:100% 100%;
}

根据需要调整大小（：