Tips on how to ensure a div expands to the width of its contents without wrapping, even if it is wider than its parent

Take a look at the code snippet on this jsfiddle link: https://jsfiddle.net/frpL3yr1/

The concept revolves around creating a bar of images positioned at the top of the screen. The img-wrapper div is intended to be animated using JavaScript, shifting leftward upon mouse hover. To visualize the end goal, refer to a similar design showcased on this page. However, in my implementation, the animation will trigger only when mouse-over occurs.

An issue arises in both my jsfiddle and the demonstration linked above - the width of the image-containing div is hardcoded. In my scenario, the CSS statically defines the width of img-wrapper as 200%. As I aim for my page to accommodate any number of images, its width should dynamically adjust based on the content. Presently, if more images are added beyond what can fit within img-wrapper, they will wrap onto a new line.

What would be the most effective approach to rectify this situation?

htmlcss

Answer №1

Utilizing flexbox and animation for an innovative approach: 

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%;
  }
}

For cross-browser compatibility, remember to include prefixes for properties such as animation

Additional resources:

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

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

Hopefully this information is valuable! :)

Answer №2

Try using flexbox and animation with translate for an interesting effect :)

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for preventing browsers from losing style information stored in inputs

https://i.sstatic.net/ab9nF.jpg My custom input field has unique CSS styles applied to it, but unfortunately, when the browser auto-fills the information in those fields, the styles get reset. ...

cssbrowser

What is the best way to line up a checkbox and its labels alongside a dropdown menu?

My index.html file has a header like this: https://i.sstatic.net/s0hAt.png I'm trying to align the checkbox and its label with the dropdown menu "In ordine". I'm using only bootstrap (no custom classes) and my current page layout is as follows. ...

htmlcssbootstrap-4

When the screen is resized, the embedded iframe moves smoothly to the left side

I recently created a projects page, but I am facing an issue with the iframe embed. Whenever the screen is resized, it keeps shifting to the left. However, what I really want is for it to be centered instead of being on the left side: https://i.stack.imgu ...

htmlcssfonts

Creating a Custom Bootstrap 4 Sticky Footer with Navigation Links and Copyright Notice

I am currently working on implementing the Bootstrap 4 Sticky footer example Everything seems to be working fine if I only have either the nav element or the span element as a child of the footer. However, when I include both elements, only the first one ...

htmlcssbootstrap-4

Forcing Reload of HTML5 Video to Avoid Caching Issues

Is there a way to instruct the HTML5 Video tag to stream the video chunks on demand/load without caching them on the client side? Essentially, how can I prevent the browser from storing the HTML5 video in its cache? My main objective is to have the video ...

javascriptasp.nethtmlhtml5-video

Adjust the appearance of highlighted menu items with CSS to enhance user experience

I am trying to enhance the visual appearance of the currently opening page using custom CSS styles. Below is a snippet of my HTML code: <ul class="nav" id="nav"> <li id="home"> <a href="home.html" data-id="home" target="ifrm">Home& ...

javascripthtmlcss

Strategies for Effective CSS Footer Placement

In the demo, you can see that my footer bar is not in the correct position. I am having trouble figuring out why the footer is not settling after the content div. Ideally, the footer should be right after the article. I tried searching for specific keyword ...

htmlcsscss-floatpositioningfooter

Enhance your canvas networking experience with informative tooltips

I have created a large force layout using D3.v4 and canvas, which means SVG is not an option due to the size. How can I implement tooltips for the elements on the canvas? Is there a way to determine the mouse's location on the canvas? I attempted t ...

javascripthtmlcanvasd3.js

NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification. https://i.sstatic.net/VZxM6.png https://i.sstatic.net/ahLkn.png CSS .modal-content{ ...

cssangularbootstrap-4bootstrap-modal

Adjust the CSS for the "a" tag's "title" attribute

I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute. However, when the description is too long, the text is displayed on a single line and some of it disappears. How can ...

javascriptjqueryhtmlcssangularjs

Craft a unique parallax effect using Framer Motion's clipping feature

To help visualize my concept, I have sketched it out using Figma. This idea involves a slide transitioning between pages. The goal is to cover the entire page with a sliding effect, and then place a sticker (dubbed the Parallax Box) on top of it. However ...

cssreactjsnext.jsframer-motion

Scrolling Horizontally with Bootstrap Cards

I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this: <div class="container-fluid py-2"> <div class="d-flex flex-row flex-nowrap" style="overflow: auto;"> <div cl ...

htmlcssbootstrap-5

Issue with ng-pattern validation not functioning correctly on textarea in AngularJS

Attempting to validate a textarea that, if valid, will enable a specific button. Utilizing ngPattern for validation but encountering issues with implementation. Referencing the example code below: <div ng-app="test"> <form name="theForm" ng-contr ...

htmlangularjs

Having trouble with the functionality of Bootstrap 5 carousel?

I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, sim ...

htmlcsstwitter-bootstrapbootstrap-5

Enhancing Xcode security login through personalized security question prompts

I have been working on implementing the following code snippet: NSURL *url = [NSURL URLWithString:@"https://login.XXX.com/security/xxxforms// logonchalnp.fcc?TYPE=33554433&REALMOID=06-95b0f0c8-198a-1039-b583 83b02659fd47&GUID=&SMAUTHREASON=0&a ...

htmlauthenticationxcode4.5asihttprequest

What could be preventing the jQuery from showing the JSON response?

I am having an issue with a jQuery script that is supposed to pull a quote from an API in JSON format and display it on the page. However, for some reason, I am unable to retrieve data from the API. Can you help me figure out what is wrong here? Thank yo ...

jqueryhtmljsonapi

What is the best way to prevent a sticky element from scrolling along with the

I am looking to prevent a sticky div from taking up space on the website. It currently sticks to the desired position as expected. https://i.sstatic.net/wG4SK.png HTML <div v-if="isToastActive" class="toast"> <span clas ...

htmlcssvue.js

Dragging down on an iPhone screen is a feature supported by the Framework7 Cordova platform

I am currently utilizing Framework7 and Cordova wrapper for my IOS application and I am facing an issue with the dragging effect in my content. Even after attempting to disable the pull-to-refresh effect from the Cordova side, the content remains draggabl ...

javascripthtmlcsscordovahtml-framework-7

Struggling to implement a JavaScript dynamic menu on an HTML website and encountering persistent difficulties

Alright, let's take a look at the HTML code I've put together: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menus</title> <script type="text/javascript" src="Cities.js"> </scr ...

javascripthtmldynamicmenu

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss