Question

我在一个容器中有多个图像，希望将它们放入一个容器中，但是问题是我无法更改宽度和高度，因为我正在开发一个使它动态的应用程序。

如您所见，我在容器上放了一个红色边框，右边的边框丢失了。

这就是我得到的：

.container {
  display: flex;
  width: 450px;
  height: 300px;
  border: 2px solid red;
}

.container img {
  max-width: 100%
}

<div class="container">
  <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
  <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>

如何使这些图像适合红色边框？

Answer 1

您可以使用flex: 1 CSS属性进行尝试。

.container {
  display: flex;
  width: 450px;
  height: 300px;
  border: 2px solid red;
}
.container div {
  flex: 1;
}
.container img {
  max-width:100%;
}

  
<div class="container">
  <div>
    <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
  </div>
   <div>
     <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">   </div>
   <div>
     <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
   </div>
 </div>

Answer 2

这是我建议这样做的方式，您可以将所有图像保持在一行中，并进行响应和计算：

.section {
	width: 100%;
	margin: 0 auto;
}
	.section .section-inner {
		width: 100%;
		max-width: 1248px;
		margin: 0 auto; /* centers container */
		padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
		box-sizing: border-box;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: row; /* sort into rows */
		align-items: center;
		justify-content: space-between;
		text-align: center;

		background-color: rgba(255,100,100,0.25);
	}
		.section .section-inner div {
			width: calc((100% / 4) - 20px); /* calculate width for maximum accuracy | minus margin */
			padding-top: calc((100% / 4) - 20px); /* calculate width for maximum accuracy | minus margin */
			margin: 10px; /* space between boxes */

			background-size: cover;
			background-position: center;
		}
			@media screen and (min-width: 640px) and (max-width: 1023px) {
				.section .section-inner div {
					width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
					padding-top: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
				}
			}
			@media screen and (max-width: 639px) {
				.section .section-inner div {
					width: 100%; /* calculate width for maximum accuracy | minus margin */
					padding-top: 100%; /* calculate width for maximum accuracy | minus margin */
				}
			}

			.image-one {
				background-image: url(https://www.fairtrade.org.uk/~/media/FairtradeUK/Media%20Centre/Flowers.jpg?h=397&la=en&mw=760&w=760);
			}
			.image-two {
				background-image: url(https://www.floraqueen.com/blog/wp-content/uploads/2017/11/Untitled-design-3-1.jpg);
			}
			.image-three {
				background-image: url(https://www.elimaysflowers.co.uk/assets/uploads/elimays1.jpg);
			}
			.image-four {
				background-image: url(https://cdn.mos.cms.futurecdn.net/AsaMYX4F9WRNVTLsARRAsR-1920-80.jpg);
			}

<section class="section">
	<div class="section-inner">
		<div class="image-one"></div>
		<div class="image-two"></div>
		<div class="image-three"></div>
		<div class="image-four"></div>
	</div>
</section>

如果您希望它们保持缩放并且不响应，请删除响应的CSS。

希望你喜欢它，杰森。

Answer 3

您应该这样添加

.container {
    display: flex;
    width: 450px;
    height: 300px;
    border: 2px solid red;
}

.container div{
    width:33.33%;
}

.container img {
    max-width: 100%
}

<div class="container">
    <div>
        <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
    </div>
    <div>
        <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
    </div>
    <div>
        <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
    </div>
</div>

Answer 4

您可以使用此代码

body {
  margin: 0;
}

.container {
  display: flex;
  width: 450px;
  height: 300px;
  border: 2px solid red;
  padding: 0px;
}

.container img {
  max-width: 100%;
  float: left;
  width: 33.3%;
}

<div class="container">
  <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg">
  <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG">
</div>

Answer 5

您可以使用这种方式。

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 1170px;
        border: 1px solid red;
}

<div class="container">
  <img src="https://cdn.hasselblad.com/ec67f4db463750c394c4e720acedf6b506b55b48_x1d-ii-sample-01-web.jpg"  width="304" height="236">
  <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="304" height="236">
  <img src="https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG"  width="304" height="236">
</div>

如何将多个图像放入一个容器中？

5 个答案: