Here is 3 inline blocks. The first one is scalable and the right two blocks has fixed width.
In case we resize browser right to block should be visible anyway. #blockID should fit the page, at the same time image should be scalable if we resized window.
I'm trying to make image in first block scalable.
I found several ways to do that using JS, but JS is not suitable because of discreteness. Is there some tricks to do that using only css?
Here is my code (http://jsfiddle.net/t69f60s6/):
<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID">
<div style="max-width: 640;">
<div style="display: inline-block; height: 300px; max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano">
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>
</div>
<div style="display: inline-block; height: 300px; width: 640px; background: #000;">
</div>
<div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;">
</div>
</div>
</div>
UPDATE 1:
I have changed the cursive text
UPDATE 2:
I can achieve this effect using table css. But table is not good.
http://jsfiddle.net/6ng62eb7/4/
Try giving the image only a max-width of 100%.
So change:
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>
to:
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>
Updated Fiddle
You need to give the image a max-width: 100% . This will scale the image in regards to it's container. Then you need to scale the container the image is in. For now you have set <div style="max-width: 300px; width: 100%;" id="pano"> for the parent div, so the img inside will only total to 300px at max.
You also have the overall container set to <div style="max-width: 640px;">, which means that all 3 of your elements together will never be bigger than 640 px.
This is why you only see your image scaling when you make the browser window smaller.
Bottom line is, you have to make the whole element (including its container responsive or this won't work) - you have to use % instead of px, em... when defining box size. This also means the other two elements you want to keep to the right have to be in % (and all 3 need to add up to 100%.)
Try to combine display-block and inline-block like here:
<div style="width: 100%; height: 300px; white-space: nowrap;">
<div style="width: 100%; min-width: 641px; ">
<div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano">
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " />
</div>
<div style="display: table-cell; width: 70%; min-width: 641px;">
<div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content">
</div>
<div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket">
</div>
</div>
</div>
</div>
http://jsfiddle.net/rfh8dgqu/
I'm not sure about cross-browser compatible but it works in chrome
Related
Image example of what I need
I basically copied the code off of a YouTube video. I am a rookie so try and explain as easily as possible how to stack two images on top of each other.
They are the same width and same height images and need to be aligned horizontally and vertically.
.image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -260px;
}
<div class="image">
<img src="car.png">
</div>
There are a few ways to do this. The most simple would probably be to edit your CSS to do the following:
CSS:
.image {
width: 100%; /* Image container is now full-width */
}
.image img {
margin: 40px auto; /* "auto" will center block elements */
display: block; /* Set images to be "block" so they obey our auto margin */
}
HTML:
<div class="image">
<img src="path/to/image1.jpg">
<img src="path/to/image2.jpg">
</div>
JSFiddle
For horizontal and vertical centering:
While some may prefer the flex method, I prefer the table-cell method for simple alignment. Try this:
CSS:
.image {
width: 100%;
height: 500px /* Modify this to fit your needs */
display: table;
}
.image .centered {
display: table-cell;
vertical-align: middle;
}
.image .centered img {
margin: 40px auto;
display: block;
}
HTML:
<div class="image">
<div class="centered">
<img src="http://fillmurray.com/360/100">
<img src="http://fillmurray.com/360/100">
</div>
</div>
JSFiddle
If the question is only to put second image under the first just br tag
If the question is to make on blank page 2 images in center one under one:
<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse; padding: 0px; margin: 0; border: 0;">
<tr style="height: 100%">
<td style="text-align: center; vertical-align: middle; height: 100%;">
<img src="1.jpg" /><br><br>
<img src="2.jpg" />
</td>
</tr>
</table>
For body and html you need also height: 100%
I'm pretty sure all positioning is possible with div so probably I'm complicated with tables but I was too tired to find the code for vertical positioning so I used tables in my work.
I have 3 different box sizes in which I need to display an image. The image should take the entire width and height of the box but should not stretch. It can crop and center the image.
Here is an example:
https://jsfiddle.net/y1zn0mxy/
If you see the 3 different size, you will see that it works in the first and second case but not in the last one. It would work in the last one if i swap the size of the image tag to:
width: 100%;
height: auto;
but then it will not work in the first two.
Any other way to achieve this?
You can simply achieve the desired effect by inserting your image as background image instead of an <img /> tag. The advantage is, you don't need the image tags and the CSS applied to them. Just use background-size: cover; to always fit the image into the viewport. This way you have much less code and can control the image by the CSS background property.
.img {
background-image: url(http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
Create a new class for the last image (I called it landscape2 in my jsfiddle) as the last image is the only one with width value higher than the height value. Then add this:
.landscape2 {
width:100%;
}
https://jsfiddle.net/y1zn0mxy/2/
It's normal behaviour. It's normal behaviour. You can't set both axis to 100% because your image will be stretched. Why not add additional class for horizontal landscape: https://jsfiddle.net/y1zn0mxy/1/ ?
If you don't need <img ... /> you can replace it by css properties:
background
background-position
background-size: cover
Here you can see reproduce: https://jsfiddle.net/y1zn0mxy/3/
Besides Andreas good answer, you have a new way to handle this.
Just can achieve just the same functionatily of backgroound-size: cover in an image using object-fit.
It isn't as widely suported (no suport in IE/Edge) but there is a polyfill available
img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.box {
position: relative;
overflow: hidden;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
I have a header with a div which have display:table; max-width: 800px. It should act as a frame to restrict the contents width. Inside the frame are images which auto-scale and are nested inside div's with display:table-cell.
Everything is working on Chrome and Mobile Safari, but Firefox and IE are not restricting the frame width.
jsFiddle
Can anybody help me, please ;(
Set the table to have table-layout: fixed and a width of 100%.
.frame {
display: table;
max-width: 800px;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 10px;
background: #ccc;
table-layout: fixed
}
.item {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
img {
max-width: 100%;
height: auto;
}
<div class="frame">
<div class="item">
<img src="http://lorempixel.com/250/250" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/200" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/100" />
</div>
</div>
Check this Fiddle
Replace max-width to width from image css, the reason behind this is max-width does not apply to inline elements, so you will get inconsistent behavior across browsers.
img {
width: 100%;
height: auto;
}
I found how to position two divs on the same line on one screen size, but I can't make it responsive. The right image just goes below the left div. Here is my CSS and HTML
<div id="my-wrapper" style="
max-width: 941px;
width: auto;
height: auto;">
<div class="left-stuff" style="
float: left;
max-width: 100px;
width: auto;
height: auto;">
<img alt="" src="blah1.png"
style="width: auto; height: auto; max-width:100px;">
<img alt="" src="blah2.png"
style="width: auto; height: auto; max-width: 100px;">
<img alt="" src="blah3.png"
style="width: auto; height: auto; max-width: 100px;">
</div>
<div class="right-stuff" style="float:right;">
<img src="banner.png" style="width: auto; height: auto; max-width:100%;">
</div></div>
An example can be found Here: http://jsfiddle.net/TachionFiddle/c9EYe/4/
Floats aren't going to work as well since it rips it out of the layout.
I recommend inline-block and set width:50% on each.
You have to make sure images never bust your divs so do max-width: 95% or something less than that. Depending on how many there are.
Firstly please look into moving your styles into CSS stylesheets.
here is a quick stab at your problem - please note this will not work properly in IE versions 8 and below:
<div id="my-wrapper" style="
max-width: 941px;
width: auto;
height: auto;">
<div class="left-stuff" style="
float: left;
max-width: 20%;
width: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
height: auto;">
<img alt="" src="blah1.png"
style="width: auto; height: auto; max-width:100px;">
<img alt="" src="blah2.png"
style="width: auto; height: auto; max-width: 100px;">
<img alt="" src="blah3.png"
style="width: auto; height: auto; max-width: 100px;">
</div>
<div class="right-stuff" style="max-width:80%;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right;">
<img src="banner.png" style="width: auto; height: auto; max-width:100%;">
</div></div>
There are 3 changes here:
1) Specifying widths in percentages - therefore no matter how large the screen is the div will scale to match
2) box-sizing:border-box - this changes the way the browser renders the width of the div to include padding and borders. If you specify width:50% and padding:20px without border-box you end up with a div that is 50% wide + 20px of padding which of course is larger than 50%. border-box enforces that the TOTAL width of the box is 50%;
3) max-width fairly self explanatory - by setting width of the left box to 20% and the right box to 80% the combined width will always fill the space provided by the parent element
Hi I have an issue in assigning height dynamically to div areas.
Following is a demo layout type that I need to generate.
According to Dynamic content 1 and Dynamic content 2 the Gray color div automatically adjust its height as I have defined Height:auto in that layout. Thats fine.
The problem that I encounter is how to dynamically set the same height for side Div layouts(which I have indicated in Orage color). I tried with the following HTML and CSS but it doesn't work to get the height automatically in orange colored divs...
following is the HTML and CSS i tried with.
<div style="margin: auto; width: 510px; height: auto;">
<div style="display: inline-block; width: 20px; height: 100%; background-color: Orange; vertical-align: top;">
</div>
<div style="display: inline-block; width: 450px; height: auto; vertical-align: top; margin-left: -4px; margin-right: -4px; background-color: #bebebe;">
<div style="margin: auto; width: 200px; height:50px; background-color:Green; text-align:center"> Dynamic content 1 </div>
<div style="margin: auto; width: 200px; height:50px; background-color:Olive; text-align:center"> Dynamic content 2 </div>
</div>
<div style="display: inline-block; width: 30px; height: 100%; background-color: Orange; vertical-align: top;">
</div>
</div>
Following is the result I am getting for the above HTML.
It doesn't assign the height property automatically for the side divs. Even for the Right hand side div.
Not sure what I am doing wrong and would grateful if can guide me in where I am going wrong in this case. Thanks....
NOTE
The side orage colred divs are not borders.
1) add display:table to the container div. and
2) give your 'orange' divs display:table-cell
(Chrome doesn't require step 2, but other browsers like FF and IE do.)
FIDDLE
Try:
<div style="text-align:center; margin: auto; width: 510px; height: auto; background-color: Orange; vertical-align: top;">
<div style="display: inline-block; width: 450px; height: auto; vertical-align: top; margin-left: -4px; margin-right: -4px; background-color: #bebebe;">
<div style="margin: auto; width: 200px; height:50px; background-color:Green; text-align:center"> Dynamic content 1 </div>
<div style="margin: auto; width: 200px; height:50px; background-color:Olive; text-align:center"> Dynamic content 2 </div>
</div></div>
http://jsfiddle.net/dgjas/3/