CSS：不同大小的图像位于响应式浮动div列表的中心

Question

我在响应式页面中有一个产品列表，每行显示4个产品，每个产品的大小应该对页面中的所有产品保持不变，但调整为屏幕大小 - 即25％屏幕宽度。

示例https://jsfiddle.net/eliaweiss/otLcf1kn/

＆＃13;

＆＃13;

.prod {
	width: 25%;
  float: left;
}
img {
	width: 100%;
}

＆＃13;

<div class="list">
	<div class="prod">
		<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
	</div>
	<div class="prod">
		<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
	</div>


	<div class="prod">
		<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
	</div>
	<div class="prod">
		<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
	</div>

	<div class="prod">
		<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想实现以下目标：

1. HTML具有响应性 - 产品宽度始终为屏幕的25％
2. img显示为正方形
3. img keep aspect ratio
4. img not croped
5. img居中于正方形的中间

我可以用JS实现它，请参阅https://jsfiddle.net/eliaweiss/fs7jv4o7/2/

＆＃13;
＆＃13;
$(document).ready(function() {
  product_width = $(".prod").width();
  $(".prod").each(function(i, o) {
    prod = $(o);
    prod.width(product_width);
    prod.height(product_width);
  })
  $(".prod img").each(function(i, o) {
    img = $(o);
    w = img.width()  - 1;
    h = img.height() - 1;
    //console.log("w="+w+", h="+h);
    if ( w == h) return;
    if (h < w) {
        margin = (w - h)/2;
        img.css("margin-top", margin);
        img.css("margin-bottom", margin);
    }

    if (w < h) {
        img.height();
        img.width(w*w/h); // keep ratio
        h = w*w/h;
        margin = (w - h)/2;
        img.css("margin-left", margin);
        img.css("margin-right", margin);
    }    
  })
})
＆＃13;
.prod {
	width: 21%;
  float: left;
  border: 1px solid black;
  padding: 2px;
}
img {
	width: 100%;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
	<div class="prod">
		<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
	</div>
	<div class="prod">
		<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
	</div>


	<div class="prod">
		<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
	</div>
	<div class="prod">
		<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
	</div>

	<div class="prod">
		<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

但我想知道是否可以通过css

实现

Answer 1

以下是css flex的部分答案

https://jsfiddle.net/eliaweiss/otLcf1kn/1/

＆＃13;

＆＃13;

	* {box-sizing:border-box;margin:0;padding:0;}
	.list {
	  display: flex;
	  flex-wrap: wrap;
	}
	.prod {
	  width: 25%;
	  border: 1px solid black;
	  padding: 2px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	img {
	  max-width: 100%;
	}

＆＃13;

<div class="list">
	<div class="prod">
		<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
	</div>
	<div class="prod">
		<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
	</div>


	<div class="prod">
		<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
	</div>
	<div class="prod">
		<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
	</div>	
	<div class="prod">
		<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
	</div>

	<div class="prod">
		<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这对于大多数情况来说已经足够了，但它会生成矩形而不是方形