如何将图像设置为 div 大小
How to set images in div size
我在电影制作网站工作,试图以相同的尺寸显示电影图像,但我有不同尺寸的图像,我需要将图像放置在 div 中,就像全尺寸一样,即所有四个角都应该是放大了。请帮助。
我的代码
<div id="movies-images">
<img class="img-fluid" src="images/a4.jpg">
</div>
CSS :
#movies-images{
width: 100%;
height: 100%;
}
我希望图片的宽度和高度相等。
试试这个:
.img-box {
display: flex;
justify-content: space-between;
}
.movies-images {
width: 33%;
height: auto;
}
.movies-images img {
width: 100%;
display: block;
}
<div class="img-box">
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
</div>
我在电影制作网站工作,试图以相同的尺寸显示电影图像,但我有不同尺寸的图像,我需要将图像放置在 div 中,就像全尺寸一样,即所有四个角都应该是放大了。请帮助。
我的代码
<div id="movies-images">
<img class="img-fluid" src="images/a4.jpg">
</div>
CSS :
#movies-images{
width: 100%;
height: 100%;
}
我希望图片的宽度和高度相等。
试试这个:
.img-box {
display: flex;
justify-content: space-between;
}
.movies-images {
width: 33%;
height: auto;
}
.movies-images img {
width: 100%;
display: block;
}
<div class="img-box">
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
</div>