Question

目标：制作可滚动的图片库网络组件。无需脚本干预即可进行版面设计。

装备：

网络组件的大小必须完全响应和/或可调。
窗口小部件的顶部主要区域是画廊-它主要是一个弹性行容器，其中不同的图像水平放置。用户可以向左和向右滚动。
Web组件必须在底部具有一些有关当前图像的信息。该区域必须具有固定的大小[例如像素]。
因此，图库区域必须垂直缩放。

[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [ ] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] []

Firefox观察：Screenshot of the f#in Problem

屏幕截图中使用的版本：Chrome [v69]，Firefox [v63]

[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [ ] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] []

<style>
	body {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto 50px;
		height: 150px;
	}

	.container1 {
		overflow-y:hidden;
		display:flex;
	}
	
	.container2 {
		background-color: green;
	}
	
	img {
		height: 100%;
		object-fit: scale-down;
		align-self: stretch;
	}
</style>

<body>
	<div class="container1">
		<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350">
		<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350">
		<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350">
	</div>
	<div class="container2">Must retain height of 50px</div>
</body>

观察Chrome：也可以在chrome上使用，但是现在在Firefox上也无法使用...当图像被div包裹时，Chrome很喜欢。

<style>
	body {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto 50px;
		height: 150px;
	}

	.container1 {
		overflow-y:hidden;
		display:flex;
	}
	
	.container1>div{
		align-self: stretch;
	}
	
	.container2 {
		background-color: green;
	}
	
	img {
		height: 100%;
		object-fit: scale-down;
	}
</style>

<body>
	<div class="container1">
		<div><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"></div>
		<div><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"></div>
	</div>
	<div class="container2">Must retain height of 50px</div>
</body>

Answer 1

为网站编写CSS时，应将网站上元素的所有值都设为零并删除一些可用格式，以便我们在使用CSS时可以自行重写。使其在所有浏览器上都能很好地显示。这称为CSS重置。

也许您应该使用normalize.css。 https://stackoverflow.com/a/8357635

Chrome / Firefox中<img/>的大小调整行为不一致

1 个答案: