I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)
I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.
I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.
I created an illustration in case i'm not explaining well enough:
Try this http://jsfiddle.net/David_Knowles/ddh2k/
This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.
<body>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #eee;
}
#container{
margin: auto;
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
img {
width:80%;
height:auto;
display:inline-block;
vertical-align:middle;
background:#fff;
}
Related
Actually I am too lazy to ask this question since this should be the most basic thing for me. But as I still can't solve it then this is a little thing which is important to me, I can't help it.
Yeah, the min-width is not working for me too (with some treats out there which has similar issue). I have set the inline-style, float left, and overflow hidden or not. But it still doesn't fix it.
<style>
div {
width:300px;
min-width:150px;
overflow:hidden;
background:yellow;
float:left;
display:inline;
}
</style>
<body>
<div>
This/is what I want
is/everything in this world beautiful to see for me
a/love is more happiness thing than money
text/me to say I miss you too
</div>
</body>
div {
width:30%;
min-width:150px;
overflow:hidden;
background:yellow;
float:left;
display:inline;
}
use width in % to make min-width effective otherwise it will only take 300px as set value
You set the width of the div to 300px. So this div will always be 300px wide. Change it to
max-width:300px; and it will work.
Fiddle
And now there is also no need to declare floatand inline you only need:
div {
max-width:300px;
min-width:150px;
background:yellow;
}
Just a little question :
.site-main .sidebar-container {
display:inline-block;
vertical-align:top;
width:25%;
padding:0px;
margin:0;
border:0;
z-index:2;
float:right;
}
.content-area-sidebar{
width:75%;
display:inline-block;
}
why this widths don't work? one of the elemnts always goes down, i need to set 24.79% width to work and then i have a small blank space between them, i have tried with all kind of float combiantions but nothing works.
Any help would be appreciated.
Thank you
set margin:0px to your second css too:
.content-area-sidebar{
width:75%;
display:inline-block;
margin:0px;
}
by ht way if it doesn't work I suggest you use a div as parent container with position relative and child divs have position absolute so never gets mixed up:
<div style="position:relative">
<div style="width:25%;top:0px;left:0px;position:absolute;"></div>
<div style="width:75%;top:0px;left:25%;position:absolute;"></div>
</div>
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 know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>