css - 谷歌浏览器中奇怪的图像纵横比

问题描述

这是我偶然发现的一个奇怪的 CSS 问题。它只发生在谷歌浏览器中（我只测试了 Firefox 和谷歌浏览器，只有谷歌浏览器有这个问题）。

.product {
	display: grid;
	grid-template-columns: 35% 65%;
	justify-content: center;
	align-items: center;
}
.imgcontainer {
	display:grid;
	grid-template-rows: 75% 25%;
	grid-template-columns: 20px 1fr 20px;
	grid-row: 1 / span 2;
	grid-gap: 5px;
	width: 100%;
	height: 100%;
}
.imgcontainer.solo .mainimgcontainer {
	grid-row: 1 / span 2;
}
.mainimgcontainer { 
	max-height: 100%;
	text-align: center;
	grid-column: 1 / span 3;
	align-items: center;
	justify-content: center;
}
.restimgcontainer { 
	display: flex;
	max-height: 100%;
	grid-row: 2;
	grid-column: 2;
	overflow: hidden;
	justify-content: flex-start;
	align-items: flex-start;
}
.restimgcontainer img {
	display: block;
	cursor: pointer;
	border: 1px solid gray;
	box-sizing: border-box;
	object-fit: scale-down;
    flex: 0 0 auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
}
.mainimgcontainer img {
	cursor: pointer;
	max-width: 100%;
	max-height: 100%;
}
.centercontainer {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
}
/*below is for styling*/
.productcontainer.noselect {
	display: block;
}
.productcontainer.nostock .message {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.productcontainer {
	display: grid;
	grid-template-columns: 20px 1fr;
}
.productcontainer, .restcontainer {
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 10px;
	background-color: #f9f9f9;
	text-align: center;
	width: 90%;
	max-width: 700px;
	padding: 8px;
}
.productcontainer:hover {
	border: 1px solid #FE5A1D;
}
.control {
	display: table;
	height: 100%;
	width: 20px;
	grid-row: 2;
	background-color: gray;
	border-radius: 10px;
	padding: 30% 25%;
	text-align: center;
	box-sizing: border-box;
}
.control > div {
	display: table-cell;
    vertical-align: middle;
    text-align:center;
}
.control.left {
	border-radius: 5px 0 0 5px;
}
.control.right {
	border-radius: 0 5px 5px 0;
	grid-column: 3;
}
.product header, footer {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	padding: 10px 20px;
}
footer.column {
	flex-flow: column;
	align-items: flex-start;
}
footer.column .variation {
	align-self: flex-end;
}
footer.column .variation.solo {
	align-self: flex-start;
}
footer .showprice {
	text-align: right;
	flex-grow: 1;
	align-self: flex-end;
}
.product header {
	flex-wrap: wrap-reverse;
}
.product h2, p {
	margin: 0 5px;
	text-align: left;
}
.product h3 {
	margin: 5px;
}
.variation {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 5px;
	align-self: flex-start;
}
.variation :nth-child(2n+1){
	text-align: right;
}
.variation :nth-child(2n){
	text-align: left;
}
.desc {
	display: flex;
	flex-grow: 1;
	flex-flow: column;
	align-items: flex-start;
}
.productcontainer.noselect .finalinfo {
	text-align: left;
	align-self: flex-start;
}
.finalinfo {
	text-align: right;
	flex-grow: 1;
	align-self: flex-end;
}
.toright {
	align-self: flex-end;
}

<div class="centercontainer">
	<div class="productcontainer noselect">
		<div class="product">
			<div class="imgcontainer">
				<div class="mainimgcontainer"><img id="displayimg" src="http://41.media.tumblr.com/eeec8092766317ca3d81c6dc7f2991ed/tumblr_nnqhzk72TO1slhhf0o1_1280.jpg"></div>
				<div class="control left" style="display: none;"><div> ❮ </div></div>
				<div class="restimgcontainer">
					
					<img id="rest0" src="http://41.media.tumblr.com/eeec8092766317ca3d81c6dc7f2991ed/tumblr_nnqhzk72TO1slhhf0o1_1280.jpg">
					
				</div>
				<div class="control right" style="display: none;"><div> ❯ </div></div>
			</div>
			<header>
				<div class="desc">
					<h2>Nike Hoodie (Long Sleeve)</h2>
					<p>Tan</p>
					<h3 id="stock">Stock left: 450</h3>
					<h3 id="ppu">Price per unit: RM 139.99</h3>
				</div>
			</header>
			<footer class="column">
				<div class="variation solo">
					<div>Quantity: </div><input class="setwidth" oninput="updateprice()" id="quan" min="1" max="450" step="1" value="1" name="quantity" type="number">
					
					
					
						
							<div>Color: </div>
							<select name="Color" class="setwidth" oninput="updatesel()">
								
								<option value="Black" selected="selected">Black</option>
								
								<option value="White">White</option>
								
								<option value="Gray">Gray</option>
								
								<option value="Red">Red</option>
								
							</select>
						
							<div>Size: </div>
							<select name="Size" class="setwidth" oninput="updatesel()">
								
								<option value="XS" selected="selected">XS</option>
								
								<option value="S">S</option>
								
								<option value="M">M</option>
								
								<option value="L">L</option>
								
								<option value="XL">XL</option>
								
								<option value="XXL">XXL</option>
								
								<option value="3XL">3XL</option>
								
							</select>
						
					
					
				</div>
				<div class="finalinfo">
					<h3 id="totalp">Total price: RM 139.99</h3>
				</div>
				<input class="toright" value="Add to Cart" type="submit">
			</footer>
		</div>
	</div>
</div>

JSFiddle 链接

下图是预期结果和谷歌浏览器结果，左下方的图像容器（用作图像滑块）将连续显示图像列表，在 Firefox 中，它显示的结果与预期结果完全相同。

但在谷歌浏览器中，结果不同，宽度是其父宽度的 100%。导致图像滑块一次只能显示 1 张图像。

这是 Google Chrome 的 CSS 问题吗？有什么解决方法吗？

我发现的一些解决方法/问题：

如果您检查元素并取消勾选并勾选该元素中与宽度/高度相关的 CSS 代码，问题就会消失。
如果右侧面板上没有选择元素，则没有问题。

标签： cssgoogle-chromeflexbox

css - 谷歌浏览器中奇怪的图像纵横比

问题描述

解决方案

推荐阅读