用图像填充整个 div 并使整个 div 作为链接可点击答案

【问题标题】：Fill entire div with image & make whole div clickable as a link用图像填充整个 div 并使整个 div 作为链接可点击
【发布时间】：2016-03-25 11:24:45
【问题描述】：

我有一个圆形 div，我想用图像填充它并通过将鼠标指针更改为手形光标使整个图像/div 可点击（href）

我查看了一些示例并尝试了以下不将图像加载到 div 中的示例。我还想在悬停时缩小图像。

我怎样才能做到这一点？

<div class="circleDiv">
    <a href='#'></a>
</div>

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.circleDiv a{
  background: url("path_to_image") no-repeat right center;
}

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过使用background-size、background-position、display 和:hover 伪类来实现您的目标，这是相同https://jsfiddle.net/bhfr0t1m/3/ 的JSfiddle

我希望这正是你想要的

更新：

如果您希望方形图像为圆形，您可以使用以下代码

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow:hidden;
}

.circleDiv a img{
  border-radius: 50%;
   transform: translate(50%,50%);
   height: 50%;
    width: 50%;
    display: block;
}

.circleDiv a img:hover{
    height: 100%;
    width: 100%;
    transform: translate(0,0);
   
  }

<div class="circleDiv">
    <a href='#'><span><img src="http://s27.postimg.org/6ndnxsbqr/index.jpg"/></span></a>
</div>

【讨论】：

谢谢 - 在小提琴中，图像是一个正方形。有没有办法可以缩放它以填充圆形 div？
@usert4jju7 我已经更新了我的 jsfiddle，只需检查答案中的更新链接。实际上你已经在你的问题中写了缩小，这意味着缩小尺寸，而放大意味着增加尺寸。请更新您的问题。您也可以在:hover css 定义中将background-size 属性设置为任何值（根据您的方便程度（您想缩放的程度）。
@usert4jju7 更新了将方形图像转换为圆形图像的答案。
你好 geeksal - 我遇到了另一个与填充背景颜色相关的问题，该问题是从单击的 div 开始的页面。我在这里创建了一个问题 - http://stackoverflow.com/questions/36232064/html-grow-transition-image-color-to-fill-entire-web-page。如果您愿意提供帮助，请告诉我。

【解决方案2】：

您可以使用以下方法使整个 DIV 可点击（而不是其中的元素）：

<div class="circleDiv" role="button" onClick="location.href='stackoverflow.com'">

将此 CSS 添加到 div 类（只是为了更改鼠标指针）：

cursor: pointer;

【讨论】：

【解决方案3】：

只需将以下内容添加到.circleDiv a

.circleDiv a{
  ...

  display: block;
  height: 100%;
  width: 100%;
}

Fiddle

【讨论】：

谢谢 smnbbrv。我已经用工作图像更新了https://jsfiddle.net/7avvwreq/。如果我放一个正方形图像，整个变成正方形而不是保持圆形。图像不会缩小到div 的大小。你能帮忙解决这个问题吗？

【解决方案4】：

试试这个：

<a href='https://www.google.fr/'>
   <div class="circleDiv">
   </div>
</a>

.circleDiv{
   position: relative;
   margin: 30px 70px 30px 70px;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   background: url("path_to_image") no-repeat right center;
   cursor: pointer;
 }

【讨论】：

【解决方案5】：

我已经更新your js fiddle

您需要为 img 添加 :hover 以及为 img 或包装器添加边框半径。仅将其添加到包装器还需要将溢出设置为隐藏。

【讨论】：

您好 noa-dev - 我遇到了另一个与填充背景颜色相关的问题，该问题是从单击的 div 开始的页面。我在这里创建了一个问题 - http://stackoverflow.com/questions/36232064/html-grow-transition-image-color-to-fill-entire-web-page。如果您愿意提供帮助，请告诉我。

【解决方案6】：

看起来很有趣，是使用剪辑的好时机 :) 我创建了一个小提琴，但没有太大变化。当您到达圆的边缘时，使用剪辑会阻止奇怪的鼠标指针变化。

.circleDiv {
   position: relative;
   background-color: #09f;
   margin: 30px 70px 30px 70px;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   overflow: hidden;
}

.circleDiv a {
   background: url('https://placeimg.com/500/500/animals') no-repeat center;
  background-size: fill;
  display: block;
  width: 250px;
  height: 250px;
  -webkit-clip-path: circle(125px at center);
  clip-path: circle(125px at center);
}

/* hover style, could be animated */
.circleDiv a:hover {
  background-size: contain;
}

Fiddle link

【讨论】：

很酷的东西。谢谢你:)