This is My fiddle:
Its a simple issue and i am not getting why i cant have this background image responsive..
I am using the bootstrap class : "img-responsive" to make it responsive.
After 1460px on width ,the image stops adapting to the width.
The image
id="background" class="img-responsive" lies within
The div
div id="innerWrapper"
This it the required css code:
#innerWrapper{
border: 2px solid;
float:none;
position: relative;
overflow:hidden;
width:100%;
display:block;
height: auto;
background: no-repeat scroll 0 0;
background-size: 100% 100%;
}
#background{
max-width:100% !important;
height:auto;
display:block;
}
I was using http://designmodo.com/responsive-test/ for the responsive testing.
Your problem is that .img-responsive class defines the following CSS:
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
And what this CSS means is:
Whatever my image size is, it will take all the space it has to fit its natural width (1279px) but, if it overflows its wrapper, it will fit to it.
If you want your image to always fit the size of its wrapper, you have to specify the following css:
#background{
width: 100%;
}
But that's not enought, if you want your image to keep its aspect ratio, you also have to specify the height attribute:
#background{
width: 100%;
height: 100%;
}
Tell me if it worked.
Related
Currently I'm trying to fix a div class to always be 80% of the screen size if that's possible? I don't want the div to resize when I change the size of my browser, would I be better using media queries?
.main{
width: 80%;
min-width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
You write
I don't want the div to resize when I change the size of my browser
Well, then use a fixed width in pixels:
.main{
width: 600px; /* or whatever value you wish */
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
If you always want your div to be 80% of screen size. use viewport units. vw in your case which means viewport width.
This way your div will always be 80vw out of 100vw which is the full viewport size.
See below
.main {
height:100px;
width:80vw;
background:red;
}
<div class="main"> </div>
I would like to ask one question about css positioning and image
I have one outerwrapper div I set it's margin equal from the body element.
My problem is when I place an image in this outerwrapper container it overflow which I don't want.
I want to stay image in its outerwrapper div container. It's css here.
#outerwrapper {
position: absolute;
height: 100%;
width: 100%;
border: solid 2px green;
margin-left:30px;
margin-right:30px;
margin-top:30px;
margin-bottom:30px;
height: calc(100% - 60px);
width: calc(100% - 60px);
}
Here is working jsfiddle code.
https://jsfiddle.net/magtechpro/s3r2cf8r/3/
Many thanks
Just add overflow: hidden to your #outerwrapper
https://jsfiddle.net/nt2n9xu6/
you forgot to add the css class for .img-responsive
.img-responsive {max-width:100%;height:auto}
This will maintain the images proportions. You can also add overflow:hidden to your #outerwrapper.
If you don't care so much about keeping the proportion of the image intact but just want it to cover the area use this instead:
.img-responsive {width:100%;height:100%;}
I am trying to make something like this. The top image is 100% width of the browser but shorter than 100%height of the browser, so the content peeks up a little bit ( the tops of the two images below are showing ).
Also, when the brower size is scaled, it maintains it's aspect ratio and the two images always show unless the responsive breaking point #media only screen and (min-width:768px) has all of the images stack on top of eachother.
Here is my css:
.thumb-12 {
width: 100%;
height: 100%;
position: relative;
}
.thumb-12 img {
width:100%;
height: 100%;
max-height:700px;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
z-index:100;
}
this works well until it gets passed 1500px or so width wise, then it starts to stretch the image.
Is this possible to do with pure css?
I added a wrapper div around the image div, and gave it overflow:hidden and the fixed height of 700px; while keeping the height of the actual image 100%;
.thumb-wrapper {
max-height: 700px;
overflow: hidden;
}
.thumb-12 {
width: 100%;
height: 100%;
position: relative;
}
.thumb-12 img {
width:100%;
height: 100%;
height: auto;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
z-index:100;
}
It makes no sense applying a background to an img tag. Apply this directly to your container (which seems to be thumb-12) and remove the img tag.
.thumb-12 {
width: 100%;
height: 700px;
background: url('your_image.jpg') center center no-repeat;
background-size: cover;
}
Please note that the parent of this element must have a determined height if you want height: 100%; to work on all browsers (except if all parents have the same property, until body).
The code is here:
<div class="entry-page-image">
<div class="featured-image-container">
<?php the_post_thumbnail('large'); ?>
</div>
</div><!-- .entry-page-image -->
Effected by this css:
.entry-page-image { position: fixed; display: inline-block; top: 0; margin: 0 0 30px 30px; margin-left: 260px; float:left; width: 100%; }
.featured-image-container { height: 100%; width: auto; }
.featured-image-container img { height: 100%; width: auto; }
However in Firefox the browser takes the standard 1024px high image, and wont scale it down to be 100% of the browser window height. I'm aware this is quite a common problem, but I can't seem to rephrase my code to the right effect.
Anyone fancy shifting it about for me?
The issue here is that height:100%; on .featured-image-container sizes the height relative to the height of its container.
In this case, the height of the container is equal to the height of the content in the container (the natural height of the image).
If you manually set the height on html,body to 100% then you'll find that the height of your div is now as you'd expect.
Example: http://jsfiddle.net/EyLHG/
html,body{
height:100%;
}
.container{
width:auto;
height:100%;
border:1px solid red;
}
img{
min-height:100%;
}
Update
Also, setting the width of the image to auto will cause the width to be the default width of the image rather than of the container. Setting the width to be 100% will fix this scaling issue:
Example: http://jsfiddle.net/EyLHG/2/
just saw your website, I think there is image still in below the browser as well, I think you might need to add position:relative; to .entry-page-image
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.