css - CSS 中图像最大宽度 50%

Question

我有一张图片:

img src="images/logo.png" class="img-small float-left">

我只想将宽度设为 50%:

.img-small {
    max-width: 50%;
}

但是这个好像不行，在小窗口里超过50%。我也尝试了 px 值，但没有运气......

我有一个 .small 类，它也是调整文本大小的，这就是为什么我称它为 .img-small 的原因。有没有一种方法可以同时命名 .small，一个是调整文本大小，另一个是图像？

这是网站:http://www.kine-stammheim.ch/

和 CSS:http://www.kine-stammheim.ch/css/screen/screen-PAGE-layout.css

Answer 1

But this does not seem to work.

从您发布的链接来看，这确实有效。请告诉我们，确切的问题是什么。

更新: 您正在使用更高的特异性将图像设置为 100% 宽度:

#main img { max-width: 100%; }

您将需要更高的特异性来覆盖它。

#main img.small { max-width: 50%; } /* don't do that */

但我认为更好的解决方案是不使用 ID 来设置这样的全局属性。

img { max-width: 100%; }
img.small { max-width: 50%; }

I am having a .small class also which sizes text, this is why I called this one .img-small. Is there a way I could name both .small, one would size text and the other images?

是的，您可以指定类应该对特定元素执行的操作:

.small {
    font-size .8em;
}

img.small {
    width: 50%;
}