Css 在div内的ref中调整图像的大小_Css_Html_Anchor_Image Resizing

Css 在div内的ref中调整图像的大小

css html

Css 在div内的ref中调整图像的大小,css,html,anchor,image-resizing,Css,Html,Anchor,Image Resizing,我正在尝试调整id为“homeLink”的div的大小。我将首先声明我是CSS的n00b，我希望被扔到骨头上，只是因为我知道这很简单。我也确信它会解释一些我不理解的CSS使用的基本原理，所以任何指向链接的指针都会很有用我看过这篇文章，但我不确定我是否理解为什么我不能做我想做的事情。我做了RTFM（我能找到的那个），但我还是不明白。我希望避免为此调用js，但也许我不需要这样做谢谢你的帮助；代码如下 <html> <head>

我正在尝试调整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>


#家庭链接{
/*这不管用*/
//宽度：50%；
位置：绝对位置；
左：10px；
顶部：770px；
}
/*这也不是*/
#homeLink a{
宽度：10%；
}

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

本部分：

#homeLink a {
width: 10%;
}

在CSS方面实际上是错误的，因为

没有

width

属性。您可以使用CSS查看某些行为或链接，例如鼠标悬停在链接上时加下划线以及更改已访问链接的颜色：

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

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

本部分：

#homeLink a {
width: 10%;
}

在CSS方面实际上是错误的，因为

没有

width

属性。您可以使用CSS查看某些行为或链接，例如鼠标悬停在链接上时加下划线以及更改已访问链接的颜色：

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

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

您可以通过将溢出隐藏添加到容器div来实现这一点

或者使用下面的css

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

您可以通过将溢出隐藏添加到容器div来实现这一点

或者使用下面的css

再加上一个很好的解释，改变“家庭链接a”的高度就像把房子变大一样，你可以把它变大，但里面的冰箱不会改变。为了做到这一点，你必须把冰箱做得更大。这里的原理是一样的，你把容器变大了，但不是真实的图像。蓝色和黑色：非常感谢你的精彩解释。再加上这个好的解释，改变#homeLink a的高度就像把房子变大一样，你可以把它变大到你想要的大小，但里面的冰箱不会改变。为了做到这一点，你必须把冰箱做得更大。这是同样的原理，你把容器变大了，但不是真实的图像。蓝色和黑色：非常感谢你的精彩解释。我发现这与我的要求相比非常复杂。这里可能有很多信息需要探索，但我认为它没有其他用户的信息那么重要。我发现这与我所问的问题相比非常复杂。这里可能有很多信息需要探索，但我认为它没有其他用户的信息那么重要。非常感谢。嘿，你能给我解释一下什么时候使用类，什么时候使用id吗？例如，在本例中，我尝试将id与img标记一起使用，但没有成功。类是用于丢失某些内容（将其视为一个类别）的时候，而id是用于唯一的内容。如果我们把它放在一所学校的角度来看，你会有一个班级的学生，他们都属于同一个班级，所以他们可能有相似的礼仪，但他们也都有独特的属性，因此他们有一个ID。所以他们将属于这个班级，继承一些礼仪，但也有一个ID，这是个人独有的。非常感谢。嘿，你能给我解释一下什么时候使用类，什么时候使用id吗？例如，在本例中，我尝试将id与img标记一起使用，但没有成功。类是用于丢失某些内容（将其视为一个类别）的时候，而id是用于唯一的内容。如果我们把它放在一所学校的角度来看，你会有一个班级的学生，他们都属于同一个班级，因此他们可能有相似的礼仪，但他们也都有独特的属性，因此他们有一个ID。因此，他们将属于这个班级，继承一些礼仪，但也有一个ID，这是个人独有的。

#homeLink,#homeLink a img { 

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

#homeLink{
      width:50%;
      position:absolute;
      left:10px;
      top:770px;
      overflow:hidden;
}