Here's the fiddle I'd like to have those divs in right column to fill the height. So the first div should start at the top, and the last should end at the bottom, and the space between each div would be the same. How can I achieve this ?
<div>
<div class="left">
<img src="http://serwer1307713.home.pl/bg.png" />
</div>
<div class="right">
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
</div>
This is how I would like to make it looks like
I've forgotten to add one important info, I need that to be responsive ;)
I think this is what you mean, your images do not reach the end of the page?
Add this to your CSS file:
body {
padding:0;
margin:0;
}
It's not that easy, but I think I did it: http://jsfiddle.net/Whre/X3vKd/2/
I added some wrapping divs and used :before and :after pseudo elements to enforce equal heights:
.wrapper {
position:relative;
display:inline-block;
}
.wrapper:after {
content:".";
display:block;
visibility:hidden;
height:0;
}
Assign a height property to your html and your respective divs, then you can manually specify the height for the images in your right or left divs, like so:
.left img {
height: 42%;
}
.right img {
height: 10%;
}
html, body {
height: 100%;
}
Fiddle: http://jsfiddle.net/y8sw9/4/
I have done this with js. Have a look
jsfiddle.net/y8sw9/6/
Related
I have a little problem with some of the images on my website. I have a 280x310 div-container, but all of my images are bigger than this container. I'd like to maintain the aspect ratio of the images, and fit them to the full height of the div, cropping any extra parts of the image on the left and right (keeping the image centered). Is this possible in css? Thanks for your help.
Add this to your css code
.imgfit { width: 250px; height:500px; object-fit: cover}
Object-fit will do the job for you.
Place the image as a background image for the div and use background-size: contain (to see all of the image) or background-size: cover (to scale and crop)
Check out Set size on background image with CSS?
This can be achieved with a little bit of jQuery:
By setting overflow:hidden to the div containing the image, and height:100% to the image, it will be resized to fill the height of the div, without distortion. Then we use jQuery to center the image with position:absolute.
(http://jsfiddle.net/kK4ZV/)
HTML:
<div class="container">
<img src="http://placehold.it/350x150">
</div>
<div class="container2">
<img src="http://placehold.it/350x150" class="imageid">
</div>
<div class="container2">
<img src="http://placehold.it/600x300" class="imageid">
</div>
CSS:
.container {
border:1px solid red;
width: 280px;
height:310px;
}
.container2 {
border:1px solid blue;
width: 280px;
height:310px;
overflow: hidden;
position:relative;
}
.container2 img {
height:100%;
}
.js-fix {
position:absolute;
top:0;
left:50%;
}
jQuery:
$(".imageid").each(function(){
var hWide = ($(this).width())/2; //half the image's width
hWide = '-' + hWide + 'px';
$(this).addClass("js-fix").css({
"margin-left" : hWide,
});
});
(jQuery code borrowed from here)
position: fixed;
x-overflow: hidden;
max-width: 100%
You can do this using html:
<img src='image.jpg' alt='Image' width='240' height='310'/>
You can view more of this at http://www.w3schools.com/tags/att_img_height.asp
Also, using css you can make a class or ID for the image itself:
img.sized{
height:310px;
width:210px;
}
Then use the class in your img tag:
<img src='image.jpg' class='sized'/>
You can read more about CSS sizing on http://www.w3schools.com/css/css_dimension.asp
I have headlines that should appear next to floated images if there is enough space, and drop below the images if not. I don't have access to the HTML, so I must do this in strictly CSS. This is an example of an image and headline HTML I receive, and what it ends up looking like on an iPhone, for example:
<p>
<img src="http://farm3.staticflickr.com2852/1232.jpg" style="height:265px; width:350px; float: right;"/>
</p>
<h3>THE HEADLINE</h3>
I've fixed this when it comes to wrapping <p> content around an image using the following trick, which creates a fixed width element before each paragraph which acts as a minimum width:
p:before { content: ""; width: 10em; display: block; overflow:
hidden; }
However, this approach does not work for a header. Any ideas?
is that what you are looking for?
http://jsfiddle.net/zh4AV/1/
html:
<div id="container">
<img width="100" height="100"/>
<p>headline</p>
</div>
css:
#container{
max-width:200px;
}
img{
float:right
}
I have this lines below for a reponsive site,
I need to put "no-image" class when there is no image,
<div class="row">
<div class="column">
<img id="first" width=275 height=385 src="flower-275x385.jpg" />
<img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" />
</div>
</div>
<style>
.row {
width:400px ;
}
.column {
width:50% ;
}
.column img {
width:100% ;
height:auto ;
}
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ;
}
</style>
The problem is Blank image always shown as square;
Because of natural sizes of blank.png is 1x1.
It seems "height:auto" reset or ignore HTML defined sizes (275x385),
Here is a jsfiddle for examine,
How to fit it like first image without JS?
Edit: I think This can be solved only with JS manipulations: My solution, Thank you for advices below!
You can consider doing this in CSS. Have a no-image like this:
http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg
Now for all the images, give this CSS:
img {background: url("no-image.png") no-repeat center center transparent;}
So, this way, the images to be loaded will show No Image and then those with no image, show this. :) DeviantArt uses the same technique. Do check this out.
You can try:
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ";
height:385px;
}
If i'm not misunderstanding your question, i think you can try using css property background-size .
<style>
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center;
background-size:275px 385px;
}
</style>
<img id="second" class="no-image" src="blank-1x1.png" />
if you still have to write the inline style css of width&height inside the at html, doesn't it supposed to add the 'px' after the number of size you write?
for some more useful documentation, you can surf into http://www.w3schools.com :)
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.