slideshow imgs are scaling correctly on mobile (responsive) however I don't want them to shrink when i resize my window on the desktop
.slideshow-wrapper{
width:100%;
max-width:980px; //this is the original width of image
}
#slideshow{
clear:both;
z-index:-5;
width:100%;
}
#slideshow img{
width:100%;
height:auto;
}
jQuery.each(slideArray, function(index,value) { $("<img src='img/slides/"+value+"'
width='980' height='450'>").appendTo("#slideshow");
});
<div class="slideshow-wrapper">
<div id="slideshow"> </div>
</div>
This is a lightweight solution to detect mobile users: https://code.google.com/p/php-mobile-detect/
You can use this to load two different CSS-files. One with resposive images and one with static images.
Hope that helps.
Related
i want to put an image in footer (jquery mobile),
how to make that image fit to width of footer (different width of smartphone)
Here is my code :
<div data-role="footer" data-position="fixed">
<div class="adsspace"><img id="myads" src="ads.gif"></div>
</div>
Here is my css example
#media only screen and (max-device-width:767px){
.adsspace{
width:767px;
height:50px;
}
.adsspace div, .adsspace img {
position:relative;
max-width: 767px;
max-height: 50px;
}
}
my ads.gif has width and height : 1200 * 180 px
thank you
You may try with:
.adsspace {
width:100vw;
}
It will grant the image width always adapt to the browser's width. However, you must take into account that the image height will increase as well. If you need to work with fixed dimensions, you can try with the object-fit rule, like that:
#myads {
width:1200px;
height:50px;
object-fit: fill;
}
And then you'll need to apply it as well in the media queries, specifying the new dimensions.
In case the original dimensions of the image file don't match exactly with the footer proportions, then the image will appear distorted. In that case object-fit: cover could be more suitable:
#myads {
width:1200px;
height:50px;
object-fit: cover;
}
I hope it helps!
#media only screen and (max-device-width:767px){
.adsspace{
width:100%;
height:100%;
}
.adsspace div, .adsspace img {
position:relative;
}
}
<div data-role="footer" data-position="fixed">
<div class="adsspace"><img id="myads" src="http://1.bp.blogspot.com/-GQ4s4jpyCOE/T4Zi23RtGFI/AAAAAAAAAr8/tdnhfESXJRM/s320/google+giant+face.png"></div>
</div>
I have three container, left, middle and right. Width ratio is like 15%, 70% and 15%. I want to restrict max-width of middle container to 1000px.
This works fine as long as screen resolution is under 1428px. If screen resolution is greater than 1428px, 70% becomes greater than 1000px. So i need to write another rule for these bigger screen.
So middle container is now 1000px. How i can distribute rest space to other two container - left and right? A JavaScript solution gives a certain jump/shake in the browser. I want to avoid these shaking in browser.
OK so here is how things are. I suppose you have html something like this :
HTML:
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
So you have to apply css like this ( I don't know if you're satisfied with browser support but I think there is no css only another way)
CSS:
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.left,.right,.center{
float:left;
margin:0;
padding:0;
display:inline-block;
height: 100px;
}
.left,.right{
width:15%;
background:yellow;
}
.center{
background:red;
width:70%;
max-width:1000px;
}
#media(min-width:1000px){
.left,.right{
width:calc((100vw - 1000px) / 2)
}
}
https://jsfiddle.net/Lghms68y/ Here is a fiddle. NOTE : You'll have to zoom out the page to see the effect :)
I have divs in my web page with background-images, absolute position and -1 z-index in order to make the images static and scroll rest of divs over these images. Its working flawlessly in web browsers but I'm unable to get the same functionality in mobile phones. Mobile views in web browsers shows exactly the way it should work but rest of the divs doesn't scroll over these images in mobile browsers rather, unlike web browsers, the images also scrolls.
Here's the JsFiddle link for the below code.
HTML
<div class="container">
<div class="section1">lorem ipsum dolar imit</div>
<div class="section3">
<div class="section3-img"></div>
</div>
<div class="section1">lorem ipsum dolar imit</div>
</div>
CSS
body{margin:0; padding:0;}
.container{height:800px; position:relative;}
.section1{
width:100%;
height:400px;
background-color:purple;
color:white;
z-index:10;
}
.section2, .section3{
width:100%;
height:300px;
overflow:hidden;
position:relative;
}
.section3-img{
background-size: cover;
z-index:-100;
width:100%;
height:300px;
position:absolute;
background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
}
PS: I'm yet testing on chrome browser in android phone.
Well, I would rather position a container holding the image fixed.
Because, your section3 and section3-img container scroll. So positioning a background-image as fixed would result in the question fixed to what?
Obviously mobile browsers define it as fixed to parent. And because the parent container moves with swiping so does the background-image.
I positioned a fixed div: https://jsfiddle.net/mh7eza4e/8/
HTML
<div class="container">
<div class="bg-img"></div>
<div class="section1">lorem ipsum dolar imit</div>
<div class="section3"></div>
<div class="section1">lorem ipsum dolar imit</div>
</div>
CSS
html,body{margin:0; padding:0;height:100%;}
.container{height:800px; position:relative;}
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;}
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;}
.bg-img{
position:fixed;z-index:-100;
width:100%;height:100%;height:100vh;
/* "height:100%" as a fallback for older browsers, use only if needed */
background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
background-size:cover;
}
If multiple fixed background images for each section are what you're after, then I'm afraid that's not possible with pure CSS. You need to use JS from here on.
See here: https://jsfiddle.net/mh7eza4e/17/
JS
$(window).on('scroll', function() {
var scrolledTop = $(window).scrollTop(),
windowHeight = $(window).height();
$('.section').each( function() {
var $section = $(this),
elemTop = $section.offset().top,
sectionHeight = $section.outerHeight();
if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) {
$section.addClass('active');
} else {
$section.removeClass('active');
}
})
});
$(window).trigger('scroll');
Depending on scroll position relative to the viewport I set an 'active' class to the section currently in viewport. The active section triggers a CSS-transition (using opacity) of the multiple fixed positioned background image containers.
Working a responsive site, so I cannot use set widths.
I need pictures to all crop to square. I cannot define the exact measurements because it also needs to have max-width:100% in order to make it a responsive image which adjusts it's sized relative to the container (which is relative to the width of the browser).
I've seen a lot of solutions that suggest using background-image but this not possible, it must be an img tag. It also must work in IE8.
Any ideas?
I currently have:
.views-field-field-photo img {
width: 100%;
height: auto;
}
<div class="field-content">
<img src="imagehere" >
</div>
using padding-bottom along with positioning and overflow:hidden you can create a responsive square container:
.field-content{
width:80%;
padding-bottom:80%;
margin:1em auto;
overflow:hidden;
position:relative;
background:#000
}
.field-content img {
position:absolute;
width:auto;
min-width:100%;
min-height:100%;
}
DEMO
jQuery DEMO center images when scaling
I tidied up some of the js allowing multiple images to be scaled and put 4 images on a simple grid
You can do something like overflow:hidden
I've made a square of 100px you can define your own size.
HTML
<div id="frame">
<img src="your image"/>
</div>
CSS
#frame{
width:100px;
height:100px;
overflow:hidden;
}
#frame img{
width:auto;
height:100%;
min-width:100px;
min-height:100px;
}
I'm trying to make a webpage with the following structure:
1 big div (main), and 3 divs inside it, a left shadow, content, and a right shadow.
these is the css code for them, mleft and mright are the shadows.
body,html{height:100%;}
.main {
width:900px;
height:100%;
}
.mleft, .mright {
width:25px;
height:100%;
float:left;
}
.mleft { background-image: url("shadowleft.jpg"); }
.mright { background-image: url("shadowright.jpg"); }
.content {
width:850px;
float:left;
background-color:red;
}
And the html is like this:
<div class="main">
<div class="mleft"></div>
<div class="mcontent">
(content, some text and images)
</div>
<div class="mright"></div>
</div>
I want this to be viewable in big and small screens, the problem is that when viewing in small screens or making the window small, the main div height goes below the height of content div, so the shadow is too short to cover content div.
I've been playing with min-height, but min-height:auto, doesn't work, and none of the values of "overflow" does what I want.
Any clean way of solving this that works on any browsers?
Should I use javascript?, redo everything another way?
Update:This is an image of how it looks
Update2: The height of main seems to be directly the height of the window (100%) so I main is always the size of the window, which if small it's less than the content inside it, I tried playing with min-height with no success. The expected result is that it resizes until it reaches the size of it's contents, when it should stop.
OK, I've deleted all the old stuff... found a solution using positioning :)
http://jsfiddle.net/Damien_at_SF/AtX4A/
Basically, the shadows sit inside the content div and with absolute positioning are placed at 0,0 left and 0,0 right (or you could move them outside the content using negative positioning)
UPDATE: put the main div back in and applied margin:auto to it's style in order to center the whole lot :)
HTML
<div class="main">
<div class="mcontent">
<div class="mleft"></div>
<div class="mright"></div>
(content, some text and images)>
<div style="clear:both;"></div>
</div>
</div>
CSS
body,html{
height:100%;
margin:0px;
padding:0px;
}
.main {
width:900px;
height:100%;
margin:auto;
}
.mleft, .mright {
width:25px;
height:100%;
}
.mleft {
background:green;
position:absolute;
top:0px;
left:0px;
}
.mright {
background:blue;
position:absolute;
top:0px;
right:0px;
}
.mcontent {
width:850px;
background-color:red;
position:relative;
padding-left:25px;
}
Hope that helps :)