您好,这里是当前网站 enter image description here
我正在尝试缩小图像大小,使其看起来像这样
我仍然希望元素水平和垂直居中。我尝试减少 .sample 宽度;图像变小了,但它现在不是水平和垂直居中的。如果您能指出我需要更改哪些值,那就太好了……提前致谢
.portfolio {
position: relative;
min-width: 300px;
width: 100%;
margin: 120px auto;
list-style: none;
margin-left: 70px;
margin-top: 280px;
margin-right: 0;
margin-left: 0;
padding-left: 5%;
}
.portfolio li {
position: relative;
float: left;
margin: 20px 24px;
margin-left: -15px;
margin-bottom: -70px;
width: 30%;
padding-bottom: 10%;
min-height: 270px;
min-width: 270px;
margin-left: -1%;
margin-right: 1%;
}
.portfolio li .sample {
position: absolute;
display: block;
box-shadow: 0px 0px 8px #fafafa;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 90%;
height: 56%;
min-height: 180.36px;
}
.portfolio li:hover .sample {
box-shadow: 0px 0px 12px #eee;
}
.details {
position: absolute;
bottom: 100px;
width: 90%;
display: block;
margin: 10px;
font-size: 17px;
text-align: center;
color: #8C8C8C;
letter-spacing: 1.4px;
margin-left: 0px;
margin-right: 0px;
}
<ul id="portfolio" class="portfolio">
<li>
<a href="item/samplepage.html">
<div class="sample" style="background-image: url('/images/clearear.png');"></div>
<div class="details">Clearear - website</div>
</a>
</li>
<li>
<a href="item/newsreader.html">
<div class="sample" style="background-image: url('/images/newsreader.png');"></div>
<div class="details">Social newsreader - ux/ui</div>
</a>
</li>
<li>
<a href="item/kbeauty.html">
<div class="sample" style="background-image: url('/images/kbeauty.png');"></div>
<div class="details">K-beauty app - ux/ui</div>
</a>
</li>
</ul>
最佳答案
只需更改这 3 个值:
.portfolio {
width: 80%;
margin-right: auto;
margin-left: auto;
}
要完全消除或减少水平边距,请使用这些值:
.portfolio li {
position: relative;
float: left;
margin: 20px 30px; /* tweak this however you like */
/* margin-left: -15px; remove this */
margin-bottom: -70px;
width: 20%; /* tweak this however you like */
padding-bottom: 10%;
min-height: 200px; /* lower this */
min-width: 200px; /* lower this */
/* margin-left: -1%; remove this */
/* margin-right: 1%; remove this */
}
.details { width: 100%; }
.portfolio li .sample { width: 100%; }
因为其他所有内容都是在 %
中设计的,所以我们可以缩小父级并将其居中,其余部分也将效仿。
关于html - 编辑元素大小 css 和 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41836529/