Непоследовательное поведение <img>в Chrome / Firefox - PullRequest
Новая
       54

Непоследовательное поведение <img>в Chrome / Firefox

0 голосов
/ 22 октября 2018

Цель: создать прокручиваемый веб-компонент галереи изображений.Заставьте Layouting работать без вмешательства скрипта.

Требования:

  1. размер веб-компонента должен быть полностью адаптивным и / или настраиваемым.
  2. верхней главной областью виджета является галерея - это в основном контейнер с гибкими строками, в котором разные изображения располагаются горизонтально.Пользователь может свободно прокручивать влево и вправо.
  3. веб-компонент должен иметь нижнюю область с некоторой информацией о текущем изображении.Эта область должна иметь фиксированный размер [например, в пикселях].
  4. , таким образом, область галереи должна масштабироваться вертикально.

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

Наблюдение Firefox: Снимок экрана f # в задаче

Версии, использованные в снимке экрана: 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 ... 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>

1 Ответ

0 голосов
/ 22 октября 2018

При написании CSS для веб-сайта вы должны обнулить все значения элементов на веб-сайте и удалить некоторые из доступных форматов, чтобы при использовании CSS переписывать их самостоятельно.Хорошо отображает его во всех браузерах.Это называется CSS Reset.

Возможно, вам следует использовать normalize.css.https://stackoverflow.com/a/8357635

...