Html 带有超链接的图像在视口中延伸_Html_Css_Image_Hyperlink

Html 带有超链接的图像在视口中延伸

html css image hyperlink

Html 带有超链接的图像在视口中延伸,html,css,image,hyperlink,Html,Css,Image,Hyperlink,我尝试过调整div的大小。之后我放弃了div，因为问题似乎不在那里，而是在超链接本身。当我删除超链接时，它似乎适合。我需要保留超链接，调整边框大小以适合图像（因为我需要两个图像在同一行中），并将缩放保持在div内这是小提琴： a[href$=”.jpg“]{ 利润率：20px；边框：1px纯黑；溢出：隐藏； } a[href$=”.jpg“]img{ 转变：转变； } a[href$=”.jpg“]：悬停img{ 转换：比例（1.3）；变换原点：50%50%； } a[href$=”.

我尝试过调整div的大小。之后我放弃了div，因为问题似乎不在那里，而是在超链接本身。当我删除超链接时，它似乎适合。我需要保留超链接，调整边框大小以适合图像（因为我需要两个图像在同一行中），并将缩放保持在div内

这是小提琴：

a[href$=”.jpg“]{
利润率：20px；
边框：1px纯黑；
溢出：隐藏；
}
a[href$=”.jpg“]img{
转变：转变；
}
a[href$=”.jpg“]：悬停img{
转换：比例（1.3）；
变换原点：50%50%；
}
a[href$=”.jpg“]{
显示器：flex；
栏目：2个；
利润率：0；
边界半径：5px；
}

首先：您的div id应设置为

，无需在其中插入

div默认的

显示

设置为

块

。因此，在修复div id之后，只需向div添加

display:inline block

：

#container {
  display: inline-block;
}

为什么从块更改为内联块？据

与display:block相比，主要区别在于display:inline块不会在元素后添加换行符，因此元素可以位于其他元素旁边

另外，如果您有关于内联块与内联块与内联块的问题，我建议您阅读

最终结果：

a[href$=”.jpg“]{
利润率：20px；
边框：1px纯黑；
溢出：隐藏；
}
a[href$=”.jpg“]img{
转变：转变；
}
a[href$=”.jpg“]：悬停img{
转换：比例（1.3）；
变换原点：50%50%；
}
a[href$=”.jpg“]{
显示器：flex；
栏目：2个；
利润率：0；
边界半径：5px；
}
#容器{
显示：内联块；
}