0

我正在尝试调整 id 为“homeLink”的 div 的大小。我将首先声明我是 CSS 的 n00b 并且我希望被扔到骨头上，只是因为我知道这很简单。我也确信它会解释一些我不理解的 CSS 使用的基本知识，因此任何指向链接的指针都会有所帮助。

我看到了这篇文章，但我不确定我是否理解为什么我不能做我想做的事情。我做了 RTFM（我能找到的那个），但我仍然不明白。我想避免为此调用 js，但也许我不需要无论如何。

谢谢你的帮助; 下面的代码。 

    <html>
        <head>
            <style> 
                #homeLink { 
                    /*this doesn't work */
                    // width: 50%;
                    position:absolute;
                    left:10px;
                    top: 770px;
                }

                /* nor does this */
                #homeLink a {
                    width: 10%;
                }       
            </style>
        </head>

        <body>
            <div id="homeLink"><a href="http://www.someurl.com"><img src="homebutton.png"/></a></div>
        </body>
    </html>
4

3 回答 3

2

正如@Mr D 所说，您需要调整图像本身而不是 div 的大小。

这部分：

#homeLink a {
width: 10%;
}

在 CSS 方面实际上是错误的，因为a它没有width属性。您可以使用 CSS 预先设置某些行为或链接的格式，例如将鼠标悬停在链接上时加下划线和更改访问链接的颜色：

a.hover {text-decoration: underline}
a.visited {color: #999999}
于 2012-05-06T19:50:35.670 回答
1 
<img class="image" src="homebutton.png"/>

然后在你的css样式中：

.image {
height: 200px;
width: 300px;
}
于 2012-05-06T19:41:47.460 回答
0

这不是调整大小，因为容器 div 中的图像可能大于容器的宽度和高度

  1. 您可以通过将溢出隐藏添加到容器 div 来实现这一点。
  2. 或使用以下 css
#homeLink,#homeLink a img { 

                    width: 50%;
                    position:absolute;
                    left:10px;
                    top: 770px;
                }
or

#homeLink{
      width:50%;
      position:absolute;
      left:10px;
      top:770px;
      overflow:hidden;
}
于 2012-05-06T19:52:17.590 回答