I'm trying to make a website using html and css.
I have put 5 divs next to each other and there width and height depends on the size of the window. Then I have put images in each of those divs. the size of those pictures also depends on the size of the window.
The problem that I'm having is that only a part of my image is shown in the div.
The code:
<div id="cotainer">
<div id="bar1"><img src="modern_combat_1.jpg"></div>
<div id="bar2"><img src="modern_combat_2.jpg"></div>
<div id="bar3"><img src="modern_combat_3.jpg"></div>
<div id="bar4"><img src="modern_combat_4.jpg"></div>
<div id="bar5"><img src="modern_combat_5.jpg"></div></div>
this is the style:
html, body{margin:0;padding: 0;border:0;}
#bar1 {top:35%;width:20%;bottom:35%;background-color:red;position:absolute;}
#bar2 {top:35%;left:20%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar3 {top:35%;left:40%;right:0;bottom:35%;background-color:yellow;position:absolute;}
#bar4 {top:35%;left:60%;right:0;bottom:35%;background-color:red;position:absolute;}
#bar5 {top:35%;left:80%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar1 img{
width:100%;
height:100%;
}
#bar2 img{
width:100%;
height:100%;
}
#bar3 img{
width:100%;
height:100%;
}
#bar4 img{
width:100%;
height:100%;
}
#bar5 img{
width:100%;
height:100%;
}
Tthe result is that the 3 pictures in the middle aren't completely shown in the divs
can someone help me so that the 3 pictures in the middle are shown completely
You have giver width to #bar1 div only.
Give width to the rest of divs also.
Write:
#bar1,#bar2,#bar3,#bar4,#bar5{width:20%;}
Fiddle here.
Also try using max-width:100% for images;
Related
I've converted two SVG images to css/data images, first time working this way.
I want the images to be responsive, in the centre and with a max-width of 800px.
I have made the height 100% and width 100% but when the browser is narrow, there is a huge gap underneath the images which makes the user have to scroll a long way to get to the next image, I want it right up against it.
I've messed about with this all day and can't figure it out.
I have attached a fiddle to see what I have so far and please see below the css code.
<div class="container">
<div class="front"></div>
<div class="front"></div>
</div>
and here's the css minus the front style as it would not post correctly.
* {
margin:0;
padding:0;
}
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
background:pink;
}
.container {
width:100%;
height:100%;
margin:0 auto;
}
Here's the fiddle:
https://jsfiddle.net/gjkx1ye5/1/
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
I have 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;
I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
Hi i'm trying make a website that has a header at the top and and div that loops through some images in the background. at the moment i'm trying just to get it to display one image that is responsive to the screen size so no matter what screen your on the background image will scale to fit the height and width. The problem i'm having is that i can't seem to get display anything without a hardcoded width or height.
heres what i have so far
banner.php
<div id="banner">
<div class="bgslider"></div>
</div>
global.css
/* BANNER */
#banner { style="width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background:#F00; }
.bgslider { style="width:100%; height:750px; position:fixed; left:0;top:50;overflow:hidden; background-image:url(../images/banners/trawberry_Mockup.jpg) }
take out style=" from within the brackets
try this
#banner { width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background:#F00; }
.bgslider { width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background-image:url(../images/banners/trawberry_Mockup.jpg);background-size:cover; }
http://jsfiddle.net/EE2Jc/