CODEWITHSUNDEEP
htmlcss
quantumbutterfly
quantumbutterfly

Reputation: 1955

How to make a div fit the width of its contents without causing them to wrap, while being wider than is parent

See the code in this jsfiddle: https://jsfiddle.net/frpL3yr1/

The idea is that I want a bar of images at the top of the screen. The img-wrapper div will later be animated via javascipt to move to the left when you mouse over. For an example of what I am ultimately attempting to accomplish, see this page. The difference is that in mine, the animation will only run when moused-over.

The issue is that in my jsfiddle and the linked example, the width of the div containing the images is hard-coded. In my case, the css hard-codes the width of img-wrapper to 200%. I need my page to support an arbitrary number of images, so I need its width to be equal to that of the contents. The way my jsfiddle is implemented, if there are more images that can fit in img-wrapper, they will wrap to a new line.

What is the best way to go about fixing this?

Upvotes: 0

Views: 115

Answers (2)

Ashwani Kumar
Ashwani Kumar

Reputation: 39

Use flexbox and animation with translate :)

.demo-ribbon {
  width: 100%;
  overflow: hidden;
}
.demo-ribbon .img-wrapper {
  display: flex;
  justify-content: stretch;
  margin-right: 0;
  position: relative;
  width: 100%;
}
.demo-ribbon .img-wrapper img {
  transition: all 0.5s ease;
  margin: 2px;
}
.demo-ribbon .img-wrapper img:first-child {
  animation: lefttoRight 25s linear 320ms infinite paused alternate;
}
.demo-ribbon .img-wrapper img:hover {
  transform: scale(1.1);
  cursor: pointer;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
.demo-ribbon .img-wrapper:hover img {
  animation-play-state: running;
}
@keyframes lefttoRight {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -200%;
  }
  100% {
    margin-left: 0%;
  }
}
<html>
<body>
<div class="demo-ribbon">
  <div class="img-wrapper">
    <img class="lead" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
    <img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
    <img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
    <img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
    <img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
    <img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
    <img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
    <img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
    <img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
    <img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
  </div>
</div>
</body>
</html>

Upvotes: 0

mblancodev
mblancodev

Reputation: 506

Approach using flexbox and animation: 

html, body {
  margin:0;
  padding:0;
  overflow: hidden;
}

.demo-ribbon {
  width: 100%;
  height: 70vmin;
  margin-top: 2rem;
  overflow: hidden;
}
.img-wrapper {
  height: 70vmin;
  width: 100%;

  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
}

img {
  flex: 1;
  object-fit: content;
  margin: 0 .2rem;
  width: 100vmin;
  height: 100%;  
}
.lead {
  animation: bannermove 12s linear 320ms infinite paused alternate;
}

.img-wrapper:hover .lead {
  animation-play-state: running;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0%;
 }
 100% {
    margin-left: -230%;
 }
}

You will need to add prefixes in order to work in all browsers especially animation

Further reading: https://devdocs.io/css/animation

working pen: https://codepen.io/manAbl/pen/KROvjx ;

Aspect Ratio: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp & https://css-tricks.com/aspect-ratio-boxes/

Hope helps! :)

Upvotes: 1

Related Questions