I am currently using Semplice inside of Wordpress. I am trying to create an image gallery slideshow, using both vertical and horizontal oriented photographs. I would like it to perform similar to how Squarespace handles its media sizes. In wordpress, the container is sizing itself to the vertical images, and I would like it to size to the horizontally oriented images.
my wordpress example: https://davidmatthewfiser.com/wedding/keely-aaron-test
the squarespace example: https://justinemontigny.com/lake-willoughby-vermont-wedding
is there a good way to set the container size and have the vertical images scale down, with the negative space on the sides?
thanks!
You can simply add this to your theme's custom CSS:
.content-block img {
max-height: 800px;
}
And set the max-height to however many px you want.
Related
I have a div with 1184x308px and inside I have dynamics images logo (vertical and horizontal). How can I do to the image fill the div without stretch?
If your image is not big enough to fill the space as it seems you want then you cannot just simply have css styles with width: 100% height: auto; without stretching it. One option you could use to serve the right image at the right screen size is using srcset but it is not too well supported and you will probably want to use picturefill
To use srcset on it's own you would use this:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="dynamics">
It can be a bit tricky but a quick google on srcset should help you out or this is good info on it.
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
I have been playing with twitter-bootstrap to create my photography page. I am using the default thumbnail class within li tags to create the border and align them. I have a whole bunch of thumbnails with images which are both horizontal and vertical.
The default settings really does not create a pretty layout of the thumbnails. By adding fixed height in the thumbnail's CSS, at least a neat grid gets formed now. However, within the thumbnail block, the images always align to the top. This leads to odd shaped grids when there is a vertical image in the stack.
I tried adding "vertical-align: middle;" within the thumbnail class, but does not seem to be working. I am pretty new to CSS, so kindly pardon me if I am missing something really obvious.
Unfortunately the Bootstrap thumbnails don't really normalize for a fixed height. If you want to make sure you have a clean grid, you need to crop your images to the same size. You could, alternately, use some CSS of your own to set the height of the li manually and set the img max-height to 100%, then use display: table-cell on the li so your vertical-align: middle will actually be effective at vertically centering the img.
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 :)