Question

我让一位朋友帮我上网，我必须自己完成。我有一些截屏框，我想改变它们的尺寸，但我没有成功。这些框用于选择要显示的屏幕截图。我有一个Firefox插件，向我展示了屏幕截图框的大小。并且它始终是恒定的 - 25x25像素。我改变了CSS代码，但没有成功。这是HTML：

<ul class="imgzchoose">
<li><img src='data/images/screenshots/01.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/02.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/03.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/04.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/05.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/06.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/07.png' alt='' title='none'></li>

<li><img src='data/images/screenshots/08.png' alt='' title='none'></li>
</ul>

这是CSS：

ul.imgzchoose{
margin-left: 110px;
padding-top:20px;
width:185px;
padding-bottom: 10px;
}

ul.imgzchoose li{
float:left;
position:relative;
overflow:hidden;
list-style:none;
margin: 5px 5px;
width: 50px;
height: 50px;
border: 1px solid #fff;
}

ul.imgzchoose li img{
cursor:pointer;
margin-left: 9px;
margin-top: 1px;
width:16px;
height:24px;
position:relative;
display:none;
}

问题可能是什么？

提前谢谢。

Answer 1

阅读源代码我发现你使用的是一些名为 imgz.js 的脚本，这个脚本说明如下：

if(typeof($imgz_thumb_w)== 'undefined'){$imgz_thumb_w = 25;}
if(typeof($imgz_thumb_h)== 'undefined'){$imgz_thumb_h = 25;}

这使得如果你没有明确地定义图片的宽度和高度，它就会变成25x25px

通过向图片添加width =“24”和height =“16”来修复它

<li><img src='data/images/screenshots/01.png' alt='' title='none' width='24' height='16'></li>

这不是最好的方法，但如果您不想搞砸 imgz.js

，它会有效

Answer 2

您的图像框始终为25px x 25px的原因是因为img元素都采用了样式：

ul.imgzchoose li img {
    margin-left: 9px;
    margin-top: 1px;
    width: 16px;
    height: 24px;
}

您的margin-top + height = 24px + 1px = 25px，您的margin-left + width = 16px + 9px = 25px。所有这些值都用于确定图像框的大小。如果要更改大小，则必须调整它们。

使用CSS调整图像大小不是最佳解决方案，因为大多数浏览器不会对其进行本地重新采样。你还想要扩大图像本身。如果您真的想要，可以在Internet Explorer中启用内置重采样器，但出于带宽原因，您只想自己调整图像大小。

Answer 3

以@ONi的答案为基础：

如果使用内联样式（包括JavaScript创建的样式）设置宽度和高度，则可以使用！important指令覆盖它们，如下所示：

ul.imgzchoose li img{
    cursor:pointer;
    margin-left: 9px;
    margin-top: 1px;
    width:16px !important;
    height:24px !important;
    position:relative;
    display:none;
}

Answer 4

我强烈建议您更改实际底层图片的大小，而不是依赖浏览器来更改大小。这为用户的浏览器在下载每个图像时添加了额外的内容。此外，通过更改基础图像的大小，您可以更好地控制图像的外观。

Answer 5

如果要设置<li>的大小，可以通过设置为块类型对象（即<div/>）而不是内联对象的默认值（即<span/>来设置li { display: block; }的大小。 }）。为此，您可以：

li {
    display: inline-block;
}

还有

{{1}}

这是一个仅限IE的协议，但许多现代浏览器都能理解，并且假设将来会在CSS 3中使用。

Css：无法改变<li> </li>的大小

5 个答案: