Question

我正在尝试调整id为“homeLink”的div。我首先要说明我是CSS的n00b而且我希望被抛出一个骨头，只因为我知道这很简单。我也确信它会解释我不理解的CSS使用的基本原因，所以任何指向链接的指针都会有所帮助。

我看到了this帖子，但我不确定我理解为什么我不能做我想做的事情。我做了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>

Answer 1

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

这部分：

#homeLink a {
width: 10%;
}

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

a.hover {text-decoration: underline}
a.visited {color: #999999}

Answer 2

<img class="image" src="homebutton.png"/>

然后用你的css风格：

.image {
height: 200px;
width: 300px;
}

Answer 3

这不是因为容器div中的图像可能大于容器widht和height

而调整大小

您可以通过向容器div添加隐藏溢出来实现此目的。
或使用以下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;
}

在div内的href中调整图像大小

3 个答案: