如何在较少的混入中仅更改一个参数？
我想在Less中使用多态混合，我已经为我的参数设置了默认值，考虑到这两个多态混合有不同数量的参数，当对不同的元素使用混合时，我想知道是否我只能分配一个特定的参数值，而让其他的保持默认值。例如，这里我有两个多态混入，.testMixin.，.box_1和.box_2分别使用它们，没有给出.box_1的混入的参数，编译后的CSS包含了两个具有给定默认值的混入，但我将唯一的参数10赋给了.box_2的混入，它将两个混入的第一个参数设置为10，并保留了其他参数值，如果有的话。以下是问题:首先，我应该怎么做才能将第二个混合的第二个参数赋给一个值，同时保持第一个和第三个参数的默认值？其次，我如何才能只使用其中一种多态混合？关于多态，混入是根据给定的参数数量使用的。
.testMix(@f-size:2){
font-size: (@f-size * 10px);
}
.testMix(@h:300, @s:70%, @l:50%){
color: hsl(@h, @s, @l);
}
.box{
&_1{
.testMix();
}
&_2{
.testMix(10);
// How to assign only one argument, e.g. only the second argument of first mixin
}
}
回答 2
Stack Overflow用户
发布于 2020-12-11 00:21:23
如果我没理解错的话，需要的是让图像变得可缩放，但保持在它的div中-而不是从填充中渗出。
如果您在容器上使用边距，而不是在图像上填充，则img会稍微缩放，但会停留在其元素内。
注意:你可能会考虑object-fit:在图像上包含或覆盖，而不是宽度/高度100%，这样它就不会失真，当然这取决于你的使用情况。
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
position: relative;
width: calc(33.33334% - 8px);
height: 300px;
/* border: 1px solid #000;*/
float: right;
overflow: hidden;
margin: 0 8px 0 0;
}
.container::after{
position: absolute;
top: 100%;
left: 0;
content:"";
width: 100%
height: 100%;
background-color: rgba(0,0,0,0.55);
}
.container:hover::after{
top: 0;
}
.container:nth-child(1){
margin-right: 0;
}
.container img{
width: 100%;
height: 100%;
transition: 200ms;
}
.container:hover img{
transform: scale(1.3);
}<div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg" alt=""> </div>
<div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg.jpg" alt=""> </div>
<div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg" alt=""> </div>
Stack Overflow用户
发布于 2020-12-10 23:56:44
你的问题有点含糊。我认为您希望放大图像的一部分，而不更改div / image的大小，另一种实现方法是将图像设置为div的背景，然后按如下所示调整它们的大小
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
position: relative;
width: 30%;
height: 200px;
float: right;
margin: 1%;
overflow: hidden;
background-image: url("https://images.ctfassets.net/hrltx12pl8hq/6jVTOtduUgVhFTP1h0MqmX/009e866bd1a3f8a965028874c58b2109/shutterstock_547563823.jpg?fit=fill&w=800&h=300");
background-size: 100% 100%;
background-position: center;
transition: background-size 200ms;
}
.container::after{
position: absolute;
top: 100%;
left: 0;
content:"";
width: calc(100% - 8px);
height: 100%;
background-color: rgba(0,0,0,0.55);
padding: 0 8px 0 0px;
}
.container:hover::after{
top: 0;
}
.container:hover {
background-size: 150% 150%;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</body>
</html>
https://stackoverflow.com/questions/65237433
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号