使用CSS调整图像大小

JH_Dev

我正在设计一个包含指向多个站点的链接的网页。我正在使用a href带有网站徽标图像标签。当我尝试调整CSS文件中图像的大小时,没有任何效果。

关于我做错事情的任何想法(例如,在CSS中使用错误的标记等)?

HTML代码:

 <div id="main">
    <div class="container page">
        <h1>Useful Links</h1>
        <a href="https://pcpartpicker.com/" target="_blank"><img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker"></a>
        <a href="https://www.reddit.com/r/buildapc" target="_blank"><img class="links" src="/pictures/external%20links/reddit.png" alt="Reddit Build a PC"></a>
        <a href="http://www.tomshardware.com/" target="_blank"><img class="links" src="/pictures/external%20links/tomshardwre.png" alt="Tom's Hardware"></a>
        <a href="http://www.cnet.com/forums/pc-hardware/" target="_blank"><img class="links" src="/pictures/external%20links/CNET-Logo.png" alt="Cnet"></a>
        <a href="http://www.pcper.com/" target="_blank"><img class="links" src="/pictures/external%20links/pcper.jpg" alt="PC Perspective"></a>
    </div>    
</div>

CSS代码:

.container a img{
    width: 200;
    height: 200;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.container{
    width: 960px;
    height: auto;
    margin: 0 auto;
}
partypete25

您尚未指定图像宽度/高度的度量单位,即px,%等。

如果您将值添加到图像标签本身,则200会在浏览器中自动转换为200px,而不是css。

所以这将工作为200px x 200px

<a href="https://pcpartpicker.com/" target="_blank"><img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker" width="200" height="200"></a>

但是在css中它必须是:

.container a img{
    width: 200px;
    height: 200px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

现在,如果您希望它们显示在一行中,请删除“ display:block”属性。

而且它们不会全部适合同一行,因此,如果您要达到此目的,请尝试将其减小到188px(或19%-保证金将填充剩余的空间)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS使图像调整大小并适合任何屏幕

来自分类Dev

CSS图像按高度调整大小

来自分类Dev

使用PHP直接从URL调整图像大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

如何防止在CSS中调整图像大小?

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用javascript调整图像大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

使用CSS调整滑块大小

来自分类Dev

CSS图像调整大小问题

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

如何使用CSS调整图像大小以适合其容器

来自分类Dev

CSS Flex:根据图像大小调整Flex框的大小

来自分类Dev

如何使用CSS调整HTML中的图像大小

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

自动调整CSS中图像的大小

来自分类Dev

CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用CSS调整滑块大小

来自分类Dev

CSS悬停边框,无需调整图像大小

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用PHP或CSS调整图像大小?

来自分类Dev

使用CSS调整所有大图像的大小

来自分类Dev

使用CSS动态调整图像大小

来自分类Dev

使用CSS缩放图像而无需调整大小

来自分类Dev

CSS / JS调整大小以适合图像大小

来自分类Dev

CSS 图像水平调整大小

来自分类Dev

使用 javascript 调整图像大小