http://sorgalla.com/projects/jcarousel/
Above is the carousel application i'm using (one of the more popular open source ones at the moment) and I can't figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page - when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.
That carousel uses <img> tags which means you'd either have to specify each width in the markup like this:
<img src="..." height="..." width="170" />
or use the img selector in the CSS file, something like this:
.jcarousel-skin-tango .jcarousel-item-horizontal img {
width: 170px;
}
Either way, you'd also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:
ul#carousel {
width: 99999px;
}
The carousel would stop at the last image anyway, but at least you'd know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.
Related
I'm designing a homepage in which I'm trying to display the same image 4 times in a single row (to make a kind of decorative banner). I have set each images' width to take up 25% of the screen. Theoretically, this means each image should take up a quarter and fit perfectly within a single row. However, I suspect Bootstrap is adding some kind of spacing between my images causing the 4th to spill over into the next one.
I have tried setting their margin to 0, setting their padding to 0, and setting their border-style to none. I figured setting the properties this way would override any defaults Bootstrap might place on the <img> tag, but this spacing does not seem to be going away. Additionally, checking the Developer Tools on my browser confirms that there is in fact no margin, padding, or border affecting my images. I'm not sure what else I can target to try and resolve this issue.
Any advice would be greatly appreciated. Thank you for your time in advance.
NOTE: I am not using Grid. I figured what I am attempting to do is simple enough to avoid having to use it.
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
.back-banner {
width: 25%;
opacity: .5;
padding: 0;
margin: 0;
}
Image is inline element by default. This causes it to add some white space. You can transform it to block element by using display: block, but then you need to use float: left to make them appear in one row.
Even better is to use modern css like flexbox by adding display: flex on wrapping element.
My .container in materialize CSS always took up the entire screen.
.container {
width: 100%;
}
but suddenly I opened it and it looks as though its back to the 70% container.
I thought maybe I accidentally deleted some code, but when I opened my back up of my website it too appeared as though the container was only 70% of the screen. It's weird because it wasn't like that and now every page has a tiny container. I tried making the container width bigger and it cuts things off my screen. I also tried making all the rows wider but it just made my content stretch too much.
MaterializeCSS specifically defines the class container to be a max-width of 1280px and a width of 90%
Therefore, if you wish to still use this class but want it altered, you would either edit the materialize.css or in a separate .css file, declared UNDER the materialize.css:
.container{
max-width: 100%;
width:100%;
}
You could also define these inline, however that is not recommended
I know such questions are galore in SO but I do not find a single solution to meet my need fully.
I am using fancybox jQuery plugin to create a thumbnail gallery ( non-responsive version : here- gallery is on the right side ) of images and slideshow as well.
The issue is with the thumbnail gallery - images of varying aspect ratios are uploaded and shown in the thumbnail gallery. The wrapper element (.project_gallery a - inline anchor has been made to display as block) for each image has the dimension 195x195px;
I want the images to stretch to the full of the div and be centered both vertically and horizontally.
In case you need any explanation of the last sentence above, I provide it below:
If the uploaded image has its width smaller then the height, the width should be set to fill the wrapper element fully in the horizontal direction. Even when the image width is resized to be equal to that of the wrapper, image height may not still fill the full height of the wrapper. So the image width still needs to be enlarged maintaining the aspect ratio. At a certain enlargement point, the image height fits the full wrapper height but the image width is then larger than the wrapper width. So the image needs to be placed in center of the wrapper in the horizontal direction. And the left and right side of the image may get cropped i.e: made invisible. The reverse thing should take place if we interchange the height and width of the image in the just-mentioned explanation.
And all those stuff I need to to do in a responsive design way.
EDIT:
HTML mark-up for the image gallery is below.The a element will be many as this is the wrapper of the image and .many images will be there.
<div class="project_gallery">
<a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"><img src="assets/img/projects/img_name " class="inline_block" alt="image project"/></a>
...
</div>
EDIT2 : The responsive version being devloped is here now.
EDIT 3 : In case you do not like to look into any specific site, you can just consider the full question as below :
Responsive design thumbnail gallery : how to resize and place images with randomly varying aspect ratios in the center of the same sized wrapper divs (img_wrapper) both vertically and horizontally leaving no part of the wrapper unused ? The HTML markup and a bit CSS is below:
HTML:
<div id="gallery">
<div class="img_wrapper"><img src="..." alt="img"/></div>
//the above line will repeat as many images as are there.
</div><!-- end of id gallery-->
CSS:
<style>
#gallery{
width:70%
}
.img_wrapper{
width:25%;
float:left;
}
</style>
See if this helps get you started:
CSS
.fancybox img.inline_block{
margin-left:0 !important;
}
.project_gallery a{
width:100%;
}
.project_right img:first-child{
margin-left:0;
}
.project_gallery a{
width: 100%;
height: 100%;
}
It's possible you might need to add !important or extra selectors to some of these rules so that they will take precidence and overule the exiting defaults.
Regarding the behaviour you want for the background image filling the full div, I think the existing background-image:cover; setting should do what you want. If it doesn't, start by checking that your images are large enough to fill the div.
You mention that you want to do this is responsive way. Your page design doesn't appear to be responsive, for example the image in the top slider is hard coded at 1050px so this would prevent the page from collapsing in a responsive manner. Unless you moved from your existing fancy box plugin to something like a lightbox, I think it could be a challenge to get your existing gallery to be responsive.
Good luck!
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.