I'm trying to find out how to define the height for this .gallery element based on the size of the img element inside it.
<div class="row">
<div class="large-10 columns">
<div class="gallery portrait">
<div class="cover">
<img src="http://placekitten.com/800/1029">
</div>
<ul class="thumbs">
<li class="thumb"></li>
<li class="thumb"></li>
<li class="thumb"></li>
</ul>
</div>
</div>
</div>
I'm using percentage-based heights and widths in my CSS to set the height and width of the elements inside my gallery. However, I'm defining the height of the .gallery element in pixels so my percentage elements work.
.gallery {
height: 680px;
}
I'm trying to get the height of the .gallery to adjust its self when the browser window is resized and my image gets smaller.
I've got a demo of the problem I'm having over here: http://codepen.io/realph/pen/kKAmx
Any help is appreciated. Thanks in advance!
If I understand what your issue correctly, then simply remove the height: entries on your gallery and cover class. The gallery element should expand contract to fit the image (as long as the image has % width).
Example Fiddle
CSS:
.gallery {
background: orange;
width: 100%;
float: left;
//height: 680px;
}
.cover {
float: right;
width: 63.8554217%;
//height: 680px;
overflow: hidden;
}
.gallery img {
width: 50%;
}
Related
I have three images of different sizes which I would like to layout side-by-side within a responsive container that has a max-width. e.g.
Desired layout
The HTML for the images is as follows:
<ul class="break-out ideation-sketches">
<li><img src="images/work-blue-ideation1.jpg" alt="Ideation sketches"></li>
<li><img src="images/work-blue-ideation2.jpg" alt="More ideation sketches"></li>
<li><img src="images/work-blue-ideation3.jpg" alt="Yet more ideation sketches"></li>
</ul>
I have tried making the ul a Flexbox and constraining it's size using max-width, but the images force the container to be wider than the page. With display:grid I was able to constrain the size of the container, but I wasn't able to get the center image to match the height of the first and last images on either side.
To summarise:
Add a number of images of various differing sizes and aspect ratios
Have them display side-by-side within a container
The container should shrink to the width of the browser and not extend beyond it's max-width
The height of the container is not known in advance - it adapts so as to accommodate the images
The images should resize proportionally so as to fill the container while maintaining their aspect ratio.
Each image should have the same height as its siblings, and where necessary a different width so as to maintain its own aspect ratio.
I got closer to what I was trying to achieve using the following. However I'm hoping someone could suggest a more elegant solution.
<style>
.ideation-sketches {
max-width: 700px;
margin: 0 auto;
}
.outer {
display: table;
width: 100%;
}
.outer div {
display: table-cell;
}
img {
width: 100%;
height: auto;
}
</style>
<div class="break-out ideation-sketches">
<div class="outer">
<div><img src="images/work-blue-ideation1.jpg" alt="Ideation sketches"></div>
<div><img src="images/work-blue-ideation2.jpg" alt="More ideation sketches"></div>
<div><img src="images/work-blue-ideation3.jpg" alt="Yet more ideation sketches"></div>
</div>
</div>
You can use flex like so:
.ideation-sketches {
max-width: 700px;
margin: 0 auto;
}
.outer {
display: flex;
}
.outer div {
text-align: center;
padding: 0px;
}
.center img {
width: 300px;
}
img {
width: 200px;
height: 200px;
object-fit: cover;
}
<div class="break-out ideation-sketches">
<div class="outer">
<!-- same size as third -->
<div class="left"><img src="https://placekitten.com/200/300" alt="Ideation sketches"></div>
<!-- different size -->
<div class="center"><img src="https://placekitten.com/400/200" alt="More ideation sketches"></div>
<div class="right"><img src="https://placekitten.com/440/300" alt="Yet more ideation sketches"></div>
</div>
</div>
I have a responsive slider with full-screen images. When I resize the page images stays responsive but the problem Im running into is that the parent div stays to the original height and I get very big white space and I dont know a method to fix the issue.
Sorry but i don`t know how to explain this,maybe youy can figure out from the image i added.
<!-- !Showcase -->
<div id="showcase">
<i id="arrow-left" class="arrow far fa-arrow-alt-circle-left "></i>
<div id="slider">
<div class="slide slide1"></div>
<div class="slide slide2 "></div>
<div class="slide slide3"></div>
</div>
<i id="arrow-right" class="far arrow fa-arrow-alt-circle-right "></i>
</div>
#showcase {
height: 500px;
width: 100%;
position: relative;
}
#slider {
height: inherit;
width: 100%;
overflow-x: hidden;
}
.slide {
width: 100%;
height: inherit;
background-size: contain !important;
}
.slide1 {
background: url(/Core/img/lazar1.jpg) no-repeat center 10%/cover;
}
.slide2 {
background: url(/Core/img/lazar2.jpg) no-repeat center 10%/cover;
}
.slide3 {
background: url(/Core/img/lazar3.jpg) no-repeat center 10%/cover;
}
Showcase has a fixed height, turn it into a min-height or remove it to allow the container to fit its content's
As G-Cyr said in his comment, your container element (#showcase) has an absolute height of 500px. That is what is blocking your element from filling up whenever your content would regularly go above 500px. If you want your baseline height of this container to be at least 500px, change height: 500px to min-height: 500px. That should work.
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
In this simplified example, I have a bookcase with books sitting on bookshelves. The bookcase is the outermost element with a defined width. The books on a bookshelf are supposed to appear left to right without wrapping. The bookshelf is supposed to stretch its width to show all the books on its shelf. All bookshelves need to be the same width, the width of the widest bookshelf.
My HTML:
<div class="bookcase">
<div class="bookshelf">
<div class="book">
<div class="book">
<div class="book">
</div>
<div class="bookshelf">
<div class="book">
<div class="book">
<div class="book">
<div class="book">
</div>
<div class="bookshelf">
<div class="book">
</div>
</div>
My CSS:
.bookcase {
width: 40%;
height: 300px;
margin: 0 auto;
background: lightgrey;
overflow-x: auto;
}
.bookshelf {
background: lightgreen;
white-space: nowrap;
}
.book {
display: inline-block;
height: 60px;
width: 60px;
background: pink;
}
jsFiddle demo
The problem with the current code is that when the bookcase width is smaller than the longest bookshelf and the bookcase makes the overflow scrollable, the bookshelf elements don’t stretch to fit all the books. Currently the shelves appear to be defining their width equal to the parent, the bookcase.
These pictures illustrate the problem. This is how the bookcase looks normally, which is fine:
or
But when you scroll right when the bookcase is narrow, the bookshelves’ green background is cut off, instead of reaching to the right side of the last red book:
How can I make the bookshelves take the full width of the overflowed element, rather than the width of the bookcase parent container?
Thanks to Javalsu, Hashem Qolami, and Danield for helping me find a suitable solution. Indeed, the trick is to utilize inherent display properties of tables. The solution I found was to wrap the .bookcase in another element (I'm calling this wrapper element the .wall). Move the overflow: auto; with the static height: and width: properties from the .bookcase to the .wall, and add display: table; and width: 100%; to the .bookcase.
The display: table; property is needed for when overflow is scrolling, and the width: 100%; is needed for when the overflow is not scrolling.
My New HTML:
<div class="wall">
<div class="bookcase">
<div class="bookshelf">
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
</div>
<div class="bookshelf">
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
</div>
<div class="bookshelf">
<div class="book"></div>
</div>
</div>
</div>
My New CSS:
.wall {
width: 60%;
height: 300px;
margin: 0 auto;
background: lightgrey;
overflow: auto;
}
.bookcase {
display: table;
width: 100%;
}
.bookshelf {
background: lightgreen;
white-space: nowrap;
}
.book {
display: inline-block;
height: 60px;
width: 60px;
background: pink;
}
jsFiddle demo
Result:
or
Adding display:table on the .bookcase element does almost what you need.
FIDDLE
The only difference is that instead of the scrollbars appearing when the longest bookshelf > 60% of the viewport width, they appear when the longest bookshelf > 100% of the viewport width.
But the problem with the disappearing background is gone.
your problem is that you've declared a width on .bookcase, and each bookshelf will inherit that width. If you want the bookcase and each bookshelf to always be the width of the widest row of books, set display: inline-block on .bookcase, and remove its width rule. If you need it centered, you'll need to find a way other than margin: 0 auto.
Im trying to create a new master page without using a table and its causing me a headache.
Its very nearly there, I just need to make the 'Messages' and 'Content' divs full width so the 'Menu' div, plus the 'Messages' and 'Content' div are the same width (100% of the screen) as the 'Top' div.
I have set up a jsFiddle, can anyone give me some pointers?
http://i.stack.imgur.com/d1HO5.png
http://jsfiddle.net/CJRv5/
Im happy to change HTML a bit but the following must be considered:
menu is 130px wide, the rest of the content must fill remaining window width - no 960 grid!
Simplest (unintuitive) way, just change
#divMasterSubContainer
{
float: left;
...
to
#divMasterSubContainer
{
overflow:hidden;
...
http://jsfiddle.net/CJRv5/2/
Ref http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
^ you need to make sure that the width of menu + width of messages/content is not more than the width of the container in which they reside. Do something like this
div { border: 0; margin: 0; padding: 0;{
#content {
width: 100%;
}
.clear-both { clear: both; }
.float-left { float: left; }
#menu { width: 20%; }
#main { width: 80%; }
<div id="content">
<div id="menu" class="float-left">
<p>menu</p>
</div>
<div id="main" class="float-left">
<div id="message"><p>messages</p></div>
<div id="content"><p>content</p></div>
</div>
<div class="clear-both"></div>
</div>