0

Goal: make a scrollable image-gallery web-component. Make the Layouting work without script-intervention.

Requrements:

  1. the size of the web-component has to be fully responsive and/or adjustable.
  2. the top main area of the widget is the gallery - it is mainly a flex-row container where different images reside horizontally. The user can scroll freely to the left and right.
  3. the webcomponent has to have a bottom area with some info about the current image. This area has to be of a fixed size [e.g. in px].
  4. thus, the gallery area has to scale vertically.

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

Observation Firefox: Screenshot of the f#in Problem

Versions used in the Screenshot: 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>

Observation Chrome: Got it to work on chrome too, BUT now it's not working on Firefox ... Chrome likes, when the images are wrappet in divs.

<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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
StefTheDrummer
  • 109
  • 5

1 Answers1

0

When writing CSS for a website, you should put all the values ​​of the elements on the website to zero and delete some of the available formats so that when we will use CSS rewrite to their own accord. Keeps it well displayed on all browsers. This is called CSS Reset.

Maybe you should use normalize.css. https://stackoverflow.com/a/8357635

Hoàngg
  • 75
  • 2