Question

我想更改图像的宽度以使其缩放，因此我使用了此代码

img {
    width: 16%; 
    height: auto;
    }

问题是网站上的其他图片具有相同的16％宽度，因为它们都使用相同的html <img>标记

如何更改它以使一个图像保持其原始宽度的16％，而其他图像将保持100％？

Answer 1

您应该使用CSS类或ID来更改单独图像的外观：

img {
  width: 100%;
  height: auto;
}
img.portrait {    /* Note the .portrait designation: this is the same class name we defined in the HTML */
  width: 16%;
  height: auto;
}

<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/100x200" class="portrait" />  <!-- note the class of portrait -->

话虽如此，它并不总是可以访问标记，听起来你对所有图像使用相同的img标记。如果是这种情况，您唯一真正的选择是使用属性选择器：

img[src="http://placehold.it/200x100"] {
  width: 100%;
  height: auto;
}
img[src="http://placehold.it/100x200"] {
  width: 16%;
  height: auto;
}

<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/100x200" />

img[src="/imagename.png"]

这样您可以使用img的{{1}}属性来区分图像。

Answer 2

您必须将要设置样式的任何图像设置为具有类..

HTML：

<img src="photo.jpg" class="myphoto" />

的CSS：

.myphoto{
width:16%;
}

为您想要的不同风格制作不同的课程。：）

Answer 3

当您有规则例外时，可以使用内联样式。例如：

$text = "ÇáÓáÇã Úáíßã æÑÍãå Çááå æÈÑßÇÊå";
$file = fopen("test.txt","w");
fwrite($file, $text);
fclose($file);

建议您尽可能使用CSS类。

CSS当我设置img元素的宽度时，我如何使它，以便其他img元素将具有不同的宽度？

3 个答案: