I don't want a background image, just an image on the homepage (with elements before and after the image) that will display full screen on every device. I don't want the user to have to click on the image to see it full screen. (I'm using the Harmony theme.)
Here goes the code how you can full screen image on every device but this code may be cause to stretch your image ...
img {
width:100%;
height: 100vh;
}
NOTE: First remove all containers before you do that
Add class "img-responsive" under img like <img class="img-responsive" src="">
This will work only if you have used bootstrap framework in your theme html.
Related
I have a YouTube video that I am looking to place over top of an image on Wordpress. I'm sure it involves CSS and I don't know how to add CSS to Wordpress. I can add Raw HTML using the Visual Composer, but I don't think HTML would work here...
Everything I've tried so far only places the image over top of the video or underneath the video and that's only using the elements. Any ideas?
Try setting a div that has the background set of image. Then, inside of the container, place your video.
Look at the following:
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
[shortcode for video here]
</div>
OK this is the case : we want to display image in 50% of view port when viewport size is 800px or more otherwise image is 100% so the html look like the following:-
<div class="container">
<img src="image.jpg" srcset="image.jpg 500px" sizes="(min-width:800px) 50vw,100vw" />
</div>
OR we can simply do the following through css:-
.container img{
min-width:100%;
}
#media screen and (min-width:800px){
.container{width:50%}
}
So we can control image container instead of image itself, my question here is is there is a condition that sizes attribute is considered as the best solution ?
Notice:- I know that in the first example image size will be calculated based on the view port width and not the container width
If you really only have one image resource, then you can do this with CSS only. srcset+sizes is only necessary if you want to let the browser choose which image file to download from a set of multiple files with different sizes. In that case, basing on viewport with in sizes is the only option (because browsers start to download images before external CSS has been downloaded, so container size is unknown).
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!
I'm trying to figure out how to apply a loading image <div> behind each of my images. With help from a previously answered question here, I was able to do this for my pages with a CSS&JS slideshow. Now I just want it to work with any basic image. I've tried to wrap my images in divs and apply it the same way, but I don't think I am understanding the full process here. My issue may be with how I wrap my images and text with the <p> tag to get them aligned properly.
Rather than try and post all the snippets of code that come together to make my slideshow work, I'll just refer to the beta version of the website in question: http://www.gwassociates.com/beta
I would like to be able to add the loading icon to the static images on the "Team" and "Contact" pages. You can find examples of the working effect on the "Home", "Profile" and "Press" sections.
The <div class="loading load-style"> calls out my spinning loading icon as a div background image, I threw it in the "Team" page just to show it. The icon needs to load behind each thumbnail, just like in the slideshows of the other pages.
two problems I see here.
you are using a solid image and animating it. That's not the ideal method these days. Instead just post a gif and skip the animation. It will make older computers have better performance on your site.
Check out this free gif generator: http://preloaders.net/
Your image appears just fine. But it's appearing behind the image. Put a display none on the image and you'll see what I mean. Instead of putting the loader image as a background class put it inside the div as the backgournd of another div that is display:none normally and display:block when your spinner class is applied. Then your z-index will actually work and put the spinner in front of the image.
Rough (untested) code:
<div class="image-wrapper">
<img class="image">
<div class="spinner"> </div>
</div>
<style>
.spinner { display: none; width: 100px; height: 100px; position: relative; z-index: 10;}
.spinner.loading { display: block }
</style>
Also when your javascript adds the spinner class make sure your ajax call is async or the spinner won't be added at the right time.
A more thorough example: http://preloaders.net/en/ajax_loader_script
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.