如何在css中使用父容器大小缩放图像大小？
[英]How to scale image size with parent container size in css?
问题描述
I want to scale the images inside a container image to be proportionate to their parent.
我想缩放容器图像内的图像以与其父级成比例。 I am making a card game with bootstrap styling.我正在制作一个带有 bootstrap 样式的纸牌游戏。 I have a card table image as the background image of a container (1000x1000).我有一个卡片表图像作为容器的背景图像（1000x1000）。 When I make the browser window smaller, it reduces the card table image size to 800x800 then 500x500 then 200x200.当我缩小浏览器窗口时，它会将卡片表图像大小减小到 800x800，然后是 500x500，然后是 200x200。
How can I make it so that the child pictures (100x70) will also reduce at the same ratio of its parent container?我怎样才能让子图片（100x70）也以与其父容器相同的比例减少？
.game-box { height: 1000px; position: absolute; left: 0; background: url('../table/tbltop.jpg') no-repeat; -webkit-background-size: 100% auto; }
<div class="container game-box"> <img id="p1" class="war card"> </div>
3 个解决方案
解决方案1
0 2020-01-02 03:02:09
#imgContainer{
background-image: url("your image url goes here");
background-size:100% 100%;
background-repeat: no-repeat;
}
keep in mind your image could be not proportional but its size will be equal to the div width and the div height.请记住，您的图像可能不成比例，但其大小将等于 div 宽度和 div 高度。
that should get you started....这应该让你开始......
解决方案2
0 2020-01-02 03:31:07
If you want to reduce only width.如果你只想减少宽度。
.container{ height: 100vh; background-image: url("https://www.belightsoft.com/products/imagetricks/img/intro-video-poster@2x.jpg"); background-size:100% 100%; background-repeat: no-repeat; }
<div class="container game-box"> <img id="p1" class="war card"> </div>
if you want to reduce height/width both.如果你想同时减少高度/宽度。
.container{ height: 100vh; background: url('https://www.belightsoft.com/products/imagetricks/img/intro-video-poster@2x.jpg') no-repeat; background-size: 100% auto; }
<div class="container game-box"> <img id="p1" class="war card"> </div>解决方案3
0 2020-01-02 04:11:02
This is using flex-box to arrange the cards.这是使用 flex-box 来排列卡片。 You might want to experiment with different variants of justify-content .您可能想尝试使用justify-content不同变体。 I've hard coded the width and height of the main container, which you won't want to do in reality, but you can see the resize effect by changing those values.我已经对主容器的宽度和高度进行了硬编码，这在现实中您不会想要这样做，但是您可以通过更改这些值来查看调整大小的效果。 I've set each card container to 10% of total width and height.我已将每个卡片容器设置为总宽度和高度的 10%。 Again, you may want to change that.同样，您可能想要改变它。
HTML: HTML：
<body>
<div class="container game-box">
<div class="card-wrapper">
<img id="p1" class="war card" src="https://dummyimage.com/70x100/000/fff">
</div>
<div class="card-wrapper">
<img id="p1" class="war card" src="https://dummyimage.com/70x100/000/fff">
</div>
</div>
</body>
CSS: CSS：
.game-box{
height: 1000px;
width: 1000px;
position: absolute;
left: 0;
background: url("https://dummyimage.com/1000x1000/f00/aaa") no-repeat;
-webkit-background-size: 100% auto;
display: flex;
justify-content: space-around;
}
.card-wrapper {
width: 10%;
height: 10%;
}
.card {
width: 100%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.