css - CSS：内部带有图像的锚点，保持纵横比并移动其图像

Question

我正在使用CXP（该解决方案以文本和网络模式服务于移动设备。HTML 中的更改不是直接的。）我的老板要求像 Aspect 这样的锚点，在最佳。

我的 CSS 代码

#main .ui-content #groupDiv.ui-grid-b > div {
    background-color: rgba(255,255,255,0);
    border-color: rgba(255,255,0);
}

#main .ui-content #groupDiv.ui-grid-b > div > a {
    background-color: rgba(255,255,255,0);
    border-color: rgba(255,255,0);
    border-width: 0 0 0 0;
    border: 5px solid rgba(255,255,255,0);
    box-shadow: none;
    background-image: url(../../Resources/Images/ImageButton.png);
    background-size: 100px 100px;
    background-repeat: no-repeat;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 50%;
    background-position:center;
    display: block;
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
}

我需要将图像向上移动，并保持纵横比。

我正在尝试，但我明白了

该图像已包含在 Anchor 中....

• 如何保持比例？
• 如何移动锚内的图像？

标签： cssimageanchoraspect-ratio