Resizing images to fit in a container perfectly - javascript

I searched this question all over on here and found a couple of examples and I tried one in particular, but it is not working at all like I am wanting it to.
I have set the container's height to 600px and it is not even coming close. I am sure it is due to my image width only being 33%, but is there a way to get these taller at all or am I stuck with the height only being this tall?
I don't get why the far right image isn't even going to the top of the container. I at least want that to be like that.
Is there anyway to adjust the height for these images or will that pull it completely out of proportion?
$(window).load(function(){
$('.home-img-block').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
#home-img-blocks {
width: 100%;
height: 600px;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
width: 33%;
height: 100%;
border: 1px solid black;
display: inline-block;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
max-width: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>

Following way you can cover whole height of your container. Remove max-width from image and give vertical-align:top and overflow: hidden; to container.
But not that, it will cut your image because it will not maintain aspect ratio as height is so high and width small.
$(window).load(function(){
$('.home-img-block').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
#home-img-blocks {
width: 100%;
height: 600px;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
width: 33%;
height: 100%;
border: 1px solid black;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.home-img-block img.wide {
max-height: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>

Well, you have set your height to auto for the pics so if your rightmost picture has different original size than the other 2 that might be the problem. You can try to add an id for the last picture and than work with it specifically increasing its height. You can also try to use bootstrap it is incredible useful for dividing you screen on equal parts.

#home-img-blocks {
font-size: 0;
height: 600px;
width: 100%;
}
/*#home-img-blocks-container {
border: 1px solid black;
}*/
.home-img-block {
border: 1px solid black;
box-sizing: border-box;
display: inline-block;
height: 100%;
overflow: hidden;
position: relative;
width: 33.33%;
}
.home-img-block img.wide {
height: 100%;
margin-left: -20%;
width: auto;
}
.home-img-block img.tall {
height: 100%;
margin-left: -50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
</div>
</div>
You can try the above code, It will work out for all normal desktop screen perfectly..

html
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
</div>
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
</div>
</div>
css
#home-img-blocks {
display:flex;
flex-direction:center;
/* flex-wrap:wrap; */ /* turn this on if you want the images to wrap on smaller browsers */
width:auto; /* calculates to 1156px wide */
height: 600px;
}
.home-img-block {
flex:0 0 896px; /* round down of narrowest image at 600px height */
overflow:hidden;
border: 1px solid black;
}
.home-img-block img {
max-height:100%;
}
js
no need
http://codepen.io/anon/pen/WrdELK
Documentation
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Support
http://caniuse.com/#search=flex
Do extra code specifically for ie11 if need be (#home-img-blocks -> display:table / .home-img-block --> display:table-cell) but look in ie11 first, because it may be fine.

Related

how to hide scrollbar in html?

I want to hide scrollbar, but at the same, i also want to have scrolling action i.e
I want to hide scrollbar but still, want to scroll to see rest of content without actually seeing the scrollbar.
overflow: hidden won't work because after using that I cannot scroll to see the content.
how to do that using HTML/CSS/javascript?
I am working on styling scrollbar but I noticed there is no well-defined way to style scroll bar so I made custom scrollbar using divs with jQuery, but at the end, I have two scroll bar one which I made and other default scrollbar and now I want to hide default scroll bar.
I don't want to use -webkit- because it is not accepted in all browser.
I want to hide scroll bar in the following code.
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 6000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 300px;
background-color: teal;
height: 2000px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 6000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
please anybody answer!
And overflow:auto; is out of the question?
It won't show if you don't need but does show when you do.
You need to add the following styles:
#parent {
height: 100%;
width: 100%;
overflow: hidden;
}
#child {
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
Here is the working fiddle: http://jsfiddle.net/5GCsJ/954/
Make your scroll bar transparent. You can do this by the following code.
::-webkit-scrollbar
{
width:0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
}
Hope this will help you!
Try this:
yourDiv::-webkit-scrollbar{
width: 0px;
}

How to set height div css for 16:9 aspect ratio in portrait mode for Ionic 2

Suppose I have a div that is on top of the ion-content. I'm trying to set the height of the div by getting the width of the device and calculate it so that the aspect ratio is 16:9 just like the youtube app. However, I have no idea how to achieve it using css. For now, this is what I have.
div {
width: auto;
max-height: 40%; <-- how to set this height so that it is 16:9
background: black;
div.img {
width: 360px;
max-height: 202.5px;
}
What I wanted:
You just need to use this simple css Style
56.25% = 16:9 Aspect Ratio
.img {
width: 100%;
height: 56.25vw;
}
First: your source images need be 16:9.
Than you can as simply as :
div {
width: auto;
max-height: 40%;
background: black;
div.img {
height: 100%;
}
Of course if that css corresponds to a properly nested <div><img...></div> structure.
¿Can you set the image as background-image? In that case you could use this:
The HTML:
<div class="container">
<div class="header" style="background-image: url(https://placehold.it/1200x600)">
</div>
<div class="content">Content here</div>
</div>
And the CSS:
.container {
width: 960px;
max-width: 90%;
margin: 20px auto;
border: 1px solid #ddd;
}
.header {
position: relative;
width: 100%;
padding-top: 56%;
background-color: rgba(#f00,0.1);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
overflow: hidden;
}
.content {
padding: 30px;
}
Here you can see it in action: Codepen
Hope it helps!!

How to keep an image at 50% of the page and containing its height

I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.

Bootstrap - how to make the image being scaled down to fit the window height?

How can I make the image overflow height responsive?
The images I have sometimes have long heights which make the window scroll bar visible.
So I want to make these heights responsive - to make the image being scaled down to fit the window height.
Is it possible?
CSS,
html, body {
height: 100%;
margin: 0;
padding: 0 0;
border: 4px solid black;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
border: 4px solid blue;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
border: 4px solid red;
}
.centering {
float: none;
margin: 0 auto;
}
HTML,
<div class="container-fluid">
<div class="row-fluid text-center">
<div>
<img src="images/xxx.jpg" class="img-responsive centering">
</div>
</div>
</div>
You can use height: 100% and vertical-align: top on img and on parent element use height: 100vh
body, html {
margin: 0;
padding: 0;
}
div {
display: inline-block;
height: 100vh;
width: 100%;
text-align: center;
}
img {
height: 100%;
vertical-align: top;
}
<div>
<img src="http://placehold.it/400x850">
</div>
Replace the .centering class by the built-in .center-block of bootstrap
Then add a new class .myimg
.myimg {
margin: 0 auto;
position: absolute;
height:100%;
top:0;
bottom:0;
}
Check this fiddle https://jsfiddle.net/wo2eysh8/3/

How to resize two divs side by side like windows explorer

Hi
I must create a page that RightCol must be resizable like windows explorer window.
The size of each column must equal to the height of the browser.
By resizing the browser, these two column must be resized.
My code don't work correctly. could an one help me , please?
/**jquery :**/
$("#LeftCol").resizable({
maxHeight: 250,
maxWidth: 900,
minHeight: 150,
minWidth: 200
});
$('#LeftCol').resize(function () {
$('#RightCol').width($("#parent").width() - $("#LeftCol").width());
});
$(window).resize(function () {
$('#RightCol').width($("#parent").width() - $("#LeftCol").width());
$('#LeftCol').height($("#parent").height());
});
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
#parent {
position: relative;
min-height: 300px;
margin: 0;
padding: 0;
width: 100%;
}
#LeftCol {
position: relative;
float: right;
min-height: 400px;
width: 65%;
background-color: #A2A;
overflow:auto;
}
#RightCol {
position: relative;
float: right;
min-height: 400px;
width: 35%;
background-color: #BBB;
overflow:auto;
max-height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parent">
<div id="RightCol"></div>
<div id="LeftCol"></div>
</div>
I would set one to be resizable and the other one to be a flexbox.
https://codepen.io/anon/pen/YjJBZm
I took one of the answers already given and tried it out in this pen. Some adjustments were made.
HTML
#parent {
display: flex;
border: 1px solid #000;
height: 75vh;
width: 100%;
}
#LeftCol {
flex-grow: 1;
border: 1px solid red;
resize: horizontal;
overflow: auto;
}
#RightCol {
flex-grow: 3;
border: 1px solid red;
}
<div id="parent">
<div id="LeftCol">LeftCol</div>
<div id="RightCol">RightCol</div>
</div>
Solution using pure css Flexbox Layout http://codepen.io/gmrash/pen/epaqva
#parent {
display: flex;
border: 1px solid #000;
height: 100vh;
}
#LeftCol {
flex-grow: 3;
border: 1px solid red;
}
#RightCol {
flex-grow: 1;
border: 1px solid red;
}
<div id="parent">
<div id="LeftCol">LeftCol</div>
<div id="RightCol">RightCol</div>
</div>

Categories