用img覆盖按钮的整个高度

Question

我有以下按钮的html代码和css样式。在按钮中，我想在右侧显示一张图片，该图片应始终覆盖按钮的整个高度。如果图片中的某些内容没有显示也没关系，但无论屏幕有多小，它都应该覆盖按钮的右侧。现在，在某个时候，图片不会覆盖整个高度。你对如何解决这个问题有什么建议吗？提前谢谢！

button {
position: relative;
min-width: 40%;
max-width: 40%;
min-height: 200px;
max-height: 200px;
background-color: white;
border-radius: 30px;
border: none;
margin-top: 1.5%;
margin-bottom: 1.5%;
text-align: left;
box-shadow: inset 0 0, 0 0 0.5em rgba(0, 0, 0, 0.3);
justify-content: center;
overflow: hidden;
}
.dishName {
padding-left: 2%;
top: 5%;
position: absolute;
font-weight: bold;
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 60%;
}
.dishDescription {
padding-left: 2%;
top: 20%;
width: 60%;
position: absolute;
font-size: 15px;
}
.dishPrice {
padding-left: 2%;
top: 75%;
position: absolute;
font-size: 30px;
}
.restaurantMenuImg {
display: inline-block;
width: 40%;
margin-left: 65%;
}
.restaurantMenuImg img {
width: 100%;
height: 100%;
overflow: hidden;
}

<button>
<div class=dishName>
<text>dish name</text>
</div>
<div class=dishDescription>
<text>Lorem Lorem Lorem Lorem Lorem</text>
</div>
<div class=dishPrice>
<text>900€</text>
</div>
<div class=restaurantMenuImg>
<img src=https://images.pexels.com/photos/1581384/pexels-photo-1581384.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500/>
</div>
</button>

Answer 1

您可以在下面的代码片段中这样做：我为按钮(display:flex; flex-direction:column; flex-wrap:wrap(添加了flex设置，并用height: 200px;替换了min-height: 200px;和max-height: 200px;，以定义高度(以便下一个设置工作(。此外，我将height: 100%;添加到图像的.restaurantMenuImg容器中，使其达到全高，并将图像添加到其中。

button {
position: relative;
min-width: 40%;
max-width: 40%;
height: 200px;
background-color: white;
border-radius: 30px;
border: none;
margin-top: 1.5%;
margin-bottom: 1.5%;
text-align: left;
box-shadow: inset 0 0, 0 0 0.5em rgba(0, 0, 0, 0.3);
justify-content: center;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.dishName {
padding-left: 2%;
top: 5%;
position: absolute;
font-weight: bold;
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 60%;
}
.dishDescription {
padding-left: 2%;
top: 20%;
width: 60%;
position: absolute;
font-size: 15px;
}
.dishPrice {
padding-left: 2%;
top: 75%;
position: absolute;
font-size: 30px;
}
.restaurantMenuImg {
display: inline-block;
width: 40%;
margin-left: 65%;
height: 100%;
}
.restaurantMenuImg img {
height: 100%;
width: auto;
}

<button>
<div class=dishName>
<text>dish name</text>
</div>
<div class=dishDescription>
<text>Lorem Lorem Lorem Lorem Lorem</text>
</div>
<div class=dishPrice>
<text>900€</text>
</div>
<div class=restaurantMenuImg>
<img src=https://images.pexels.com/photos/1581384/pexels-photo-1581384.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500/>
</div>
</button>

具有横向比例图像的解决方案：

button {
position: relative;
min-width: 40%;
max-width: 40%;
height: 200px;
background-color: white;
border-radius: 30px;
border: none;
margin-top: 1.5%;
margin-bottom: 1.5%;
text-align: left;
box-shadow: inset 0 0, 0 0 0.5em rgba(0, 0, 0, 0.3);
justify-content: center;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.dishName {
padding-left: 2%;
top: 5%;
position: absolute;
font-weight: bold;
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 60%;
}
.dishDescription {
padding-left: 2%;
top: 20%;
width: 60%;
position: absolute;
font-size: 15px;
}
.dishPrice {
padding-left: 2%;
top: 75%;
position: absolute;
font-size: 30px;
}
.restaurantMenuImg {
display: inline-block;
width: 40%;
margin-left: 65%;
height: 100%;
}
.restaurantMenuImg img {
height: 100%;
width: auto;
}

<button>
<div class=dishName>
<text>dish name</text>
</div>
<div class=dishDescription>
<text>Lorem Lorem Lorem Lorem Lorem</text>
</div>
<div class=dishPrice>
<text>900€</text>
</div>
<div class=restaurantMenuImg>
<img src="https://picsum.photos/seed/picsum/200/300"/>
</div>
</button>