在 CSS 中调整大小时图像消失

Question

我是一名试图编写网站代码的平面设计师。我被困在主页上已经好几个星期了。我的问题是我无法使用 CSS 调整图像大小，因为它消失或被截断了。这是我正在尝试的 do

这是我的代码：

#wrapper {
        position: relative;
}

#wrapper > div {
        border-radius: 50%;
        width: 960px;
        height: 100%;
        overflow: hidden;
        margin: auto;
        position: relative;
}

#wrapper > div#home {
        width: 291px;
        height: 290px;
        position: absolute;
        -ms-transform: translate(-50%,-50%); /* IE 9 */
        -webkit-transform: translate(-50%,-50%); /* Safari */
        transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
}

#wrapper > div#contact {
        width: 291px;
        height: 290px;
        position: absolute;
        -ms-transform: translate(-50%,-50%); /* IE 9 */
        -webkit-transform: translate(-50%,-50%); /* Safari */
        transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        margin-left: -150px;
        margin-top: 180px;
        
}

#wrapper > div#contact img {
        width: 60%;
        height: auto;
        
}

但是使用该代码我得到 this

如果您查看 contactbttn（Phone 图标），您会看到发光的边缘被切断了。

Answer 1

如果您要从 #wrapper > div 中删除 overflow: hidden;，那么您的图像将不会被截断。其他的就看你的了，因为我也看不到我们在处理什么。

在 CSS 中调整大小时图像消失

Image Disappears When Re-sizing In CSS

html

css

resize

image