Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
http://foundation.zurb.com/docs/components/orbit.html
I am trying to find where to reduce the height inside:
<ul id="home-carousel" data-orbit="" data-options="slide_number:false;bullets:false;">
On inspect chrome, it shows style="height:500px". I also tried to override it using CSS with !important, but it doesn't work.
Any help is appreciated.
thanks
I believe Orbit automatically adjusts to the height of your images, and the html and styles are auto generated based on your image height.
You possible solution would be to ensure all the images are the same dimensions.
Most of slideshow resize the slideshow according to content images, if you need it to have a fixed height, try to restrict the image height via CSS:
.orbit-element img { max-height: 200px }
This will not distort images (because we're editing just the height), and the slideshow would use that maximum height to set the orbit one.
BTW, you cannot override the height because is set up as inline code via JavaScript
I have been tasked with making an update to the following site:
http://www.sandysharkey.com/
I would like it to allow an infinite number of images to appear horizontally in each category. You will see right now that the width is hard set in the CSS, which isn't ideal as the image will start tiling underneath each other if they reach that width.
Any tips on how I can modify the CSS to allow for this?
Thanks.
Have you tried white-space: nowrap; ?
Set
white-space: nowrap;
on the image container element. Also add display: inline-block; to your images if you didn't already (or inline).
You should consider using some kind of slider script. People don't like horizontal scrollbars
There is a jquery solution I have created, which allows you to add as many images as you like, and it will adjust the width of the image container dynamically. See here - http://codepen.io/lukeocom/pen/zovbe
For a CSS only solution, you would create a container for the image container. The image container would be auto width, the outer container would have overflow-x set to auto. This css can be viewed in the above demo too.
hope this helps
If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.
Why is this happening?
Any help would be most appreciated!
Best,
Cynthia
Add this.
#navbar{ min-width: 1100px; }
same to .footer, .wrapper, and .footerbottom
min-width:1100px
The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.
Changing the min-width on the <body> to
body {
min-width: 1100px;
}
will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.
For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.
I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)