I am trying to get two images of different widths to be the same height. I've saved the images at a size so that they appear at the same height when at full width (1140px) but you will notice when the browser gets smaller, the images don't stay the same height. I am really stuck! Any help would be much appreciated.
Here is the fiddle http://jsfiddle.net/jn7g1qxg/
Open to using java or anything!
html
<div class="wrap">
<div class="row">
<div class="col-66">
<div class="col-inner">
<img src="http://i58.tinypic.com/21jvj0y.jpg">
</div>
</div>
<div class="col-33">
<div class="col-inner">
<img src="http://i57.tinypic.com/alovbq.jpg">
</div>
</div>
</div>
</div>
css
.wrap {
max-width:1140px;
}
img {
max-width:100%;
}
.col-33 {
float:left;
width:33.3%;
}
.col-66 {
float:left;
width:66.6%;
}
.col-inner {
padding:0 20px;
}
Set the height in img
img {
max-width:100%;
height: 200px;
}
http://jsfiddle.net/jn7g1qxg/2/
Related
I'm using inline-block to create an image gallery, with each image having its own div and width. I'm having a problem when I resize the page, the images adjust to the screen width, which is good, but by the time I get down to around 400px (the mobile area), the images become extremely too small.
How can I ensure that the images maintain a good size regardless of the screen width?
* {
box-sizing:border-box;
}
.container {
width:80%;
}
section.portfolio {
background:
}
section.portfolio .col {
background:;
width:23.3%;
padding:10px;
margin: 5%;
display:inline-block;
vertical-align:top;
}
section.portfolio .col img {
display:inline-block;
vertical-align:top;
}
img {
max-width:100%;
height: auto;
width: auto;
}
<section class="portfolio">
<div class="container">
<div class="col">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
</div>
<div class="col">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
</div>
<div class="col">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
</div>
</div>
</section>
You can use media queries and set a width of 300px (or whatever you prefer)
#media screen and (min-width:320px) and (max-width: 480px) {
section.portfolio .col {
width:300px;
}
}
pen is here
Also refer to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ for various mobile dimension
Give position:relative to your parent div, and position:absolute to child element, use code like:
<div class="col" style="position:relative">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg" style="position:absolute">
</div>
This might solve your problem.
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
I'm using bootstrap and my site is a responsive site.
In a row I'm having 2 divs. One is for the responsive tabs and the other is for the main content. The main content is dynamic. So the content is loaded in to this div once only at the start. The responsiveness is based on the width of the divs (not height).
My issue: I want the height of these two divs to be based on the 'dynamic content DIV height.
html:
<div class = "row">
<div class = "col-md-8 classA">
<div class="classB">
<div class="classC">
<div class="classD"></div>
<div class="classD"></div>
</div>
</div>
</div>
<div class="col-md-4 classA">
<div class="responsive-tabs"></div> <!-- bootstrap's responsive tabs -->
</div>
</div>
css:
.classA{
width: 300px;
min-height:100px;
}
.classB {
position:absolute;
width: 100%;
}
.classD{
position: absolute;
}
#media only screen and (min-width : 1224px) {
.classC{
width: 75%; /*responsiveness is based on the width here*/
height: auto; /*I think this is where the issue is?*/
}
}
A sample Fiddle
This is how it is at the moment (based on the responsive tab height):
This is what I expect it to be (to be based on the dynamic content height):
Basically if you are using jquery the answer will be the following:
Working example: Bootply Link
HTML
<div class="row" id="thedivs">
<div id="B" class="col-md-6 col-lg-6 col-sm-6">BBB
<div id="C">CCCCCC</div>
BBBB<br>
bbbbbbdsbdbsdbsbdbsbsd
</div>
<div id="D" class="col-md-6 col-lg-6 col-sm-6">DDD
<div id="A">AAAAA</div>
DDD
</div>
</div>
CSS
#A{
background-color: orange;
}
#B{
background-color: red;
}
#C{
background-color: blue;
}
#D{
background-color: green;
height:inherit;
}
#thedivs{
height:100%;
}
Use JQuery to find height of parent and set the child's height to parent's height
Javascript
$(function() {
$('#thedivs').find('#D').css('height', $('#thedivs').innerHeight());
});
for row you should use relative after that you can achieve it
Example
HTML
<div class="row">
<div class="aclass">A</div>
<div class="bclass">b</div>
</div>
CSS
.row{
position:relative;
max-width:600px;
background-color:#00ff00;
}
.aclass{
float:left;
width:48%;
height:580px;
background-color:#ff0000;
}
.bclass{
position:absolute;
width:48%;
right:0;
top:0
background-color:#0000ff;
}
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo
I have 2 images in a row, which are of different height. The structure is build using Bootstrap grid.
I want the images to be responsive according to the width of viewport, but at the same time they has to be of equal height at every moment. (otherwise the texts below are scattered)
HTML:
<div class="item container active">
<h1>Lorem IPSUM</h1>
<div class="row items-holder">
<div class="col-xs-6">
<img />
<p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p>
</div>
<div class="col-xs-6">
<img/>
<p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p>
</div>
</div>
</div>
CSS:
.items-holder img {
width: 100%;
height: auto;
max-height: 450px;
overflow: hidden;
display: block;
}
The fiddle: http://jsfiddle.net/64CLd/
Similar problem is mentioned here, but the solution doesn't work for me.
It's possible but CSS sucks :) here you have an example fully functional using javascript another option you do not have but to use javscript: http://jsfiddle.net/3y35w/6/
If max-height: 450px is removed images will continue with responsive dimensions:
var fitImages = function(){
$("#img1").removeAttr( "style" );
$("#img2").removeAttr( "style" );
var changedWidth = $("#img1").height();
var h1 = $("#img1").height();
var h2 = $("#img2").height();
//it can be done only with height but using double check ratio of the images is a bit more acurate
if (changedWidth < OrigWidth) //expand
{
//using higher image as refference when maximize
if (h1 > h2)
{
$("#img2").height(h1);
}
else if (h2 > h1)
{
$("#img1").height(h2);
}
}
else
{
//using lower image as refference when minimize
if (h1 < h2)
{
$("#img1").height(h2);
}
else if (h2 < h1)
{
$("#img2").height(h1);
}
}
OrigWidth = changedWidth;
return 0; }
you need to create a new row for the title and subtitle
http://jsfiddle.net/64CLd/2/
<div class="col-xs-6 gueas">
<div><p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p></div>
<div><p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p></div>
</div>
One solution is wrap the img tag in a div and give some height to the div. This will help you keep a consistent height, independent of the image height.
Following this, to vertically center align the image use the below css
CSS
.items-holder img {
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
}
.img_holder{
height: 450px; //This can also be calculated dynamically with javascript as the max height within all images.
position:relative;
background:#ddd; //Optional
}
HTML
<div class="img_holder">
<img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xpf1/t1.0-9/10380889_10204383083927507_6950941830183040199_n.jpg" alt="" />
</div>
DEMO