Question

我正在尝试在WordPress中自定义CSS，但我正在努力做什么......

正如您在下面的代码中看到的，有一个“li”元素，其图像具有以下类：“func-um_user gravatar avatar avatar-40 um-avatar um-avatar-uploaded”

图像属性将尺寸设置为 40px ...

<li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-663">
<a href="#">First Last <img onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" class="func-um_user gravatar avatar avatar-40 um-avatar um-avatar-uploaded" width="25" height="25" alt="First Last" pagespeed_url_hash="3917330287" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" border-radius="40">
</a>
</li>

我需要创建一个自定义CSS，将图片重置为30px 并创建一个圆角边框而不是方形...

我该怎么做？

非常感谢

此致

Answer 1

只需将其添加到您的代码中即可。

<li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-663">
<a href="#">First Last <img class="some" onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" class="func-um_user gravatar avatar avatar-40 um-avatar um-avatar-uploaded" width="25" height="25" alt="First Last" pagespeed_url_hash="3917330287" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" border-radius="40">
</a>
</li>
<style>
.some
{
//change dimensions as desired 
width:30px;
height:30px;
//this will give a rounded border
border-radius:50%;
}
</style>

Answer 2

将wordpress图像类40中的类更改为30.为了使边框变圆，使用了border-radius: 30px内联样式。

class="func-um_user gravatar avatar avatar-30 um-avatar um-avatar-uploaded"

这是完整的代码

＆＃13;

<li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-663">
  <a href="#">First Last <img onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" class="func-um_user gravatar avatar avatar-30 um-avatar um-avatar-uploaded" width="25" height="25"; alt="First Last" style="border-radius:30px";>
</a>
</li>

＆＃13;

希望这符合您的要求。

Answer 3

关注代码css

.menu-item .func-um_user.gravatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 5px; //use to spacing between name and avatar
}

Answer 4

你可以尝试这个CSS：

.menu-item > a > img {
  width:         30px; 
  height:        30px; 
  border-radius: 30px;
}

...当这不起作用时，由于特异性（你没有发布你的CSS文件），你可以试试这个：

#masthead .menu-item > a > img {
  width:         30px; 
  height:        30px; 
  border-radius: 30px;
}

...当这不起作用时，使用!important强制CSS工作：

.menu-item > a > img {
  width:         30px!important; 
  height:        30px!important; 
  border-radius: 30px!important;
}

这是一个工作示例（简化选择器）：

＆＃13;

img {
  width:         30px; 
  height:        30px; 
  border-radius: 30px;
}

＆＃13;

<img onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" />

＆＃13;

或检查：https://codepen.io/anon/pen/aELYry

WordPress CSS - 如何调整大小并使其成为圆形图像

4 个答案: