I want the content inside of my div to scale with the browser vertically to prevent the need for scrolling The images will be different orientations so the width will be different. I know this can be achieved horizontally with width:100%; but max-height:100%; or height:auto; both still extend past the browser window for me and I'm not sure why.
EDIT: Had a lot of additional modal code in here, and simplified it down to the html/css and switched from simple width:100% height: 100% to vh and vw.
Fiddle :https://jsfiddle.net/duckyduck/6soe8zs0/
What's happening:
How I want it to look:
<body>
<style>
.modal {
display: block;
position: fixed;
z-index: 1;
box-sizing:border-box;
left: 0;
top: 0;
height: 100%;
width:100%;
overflow:auto;
background-color:#D81E21;
}
.modal-content {
position: relative;/*modal x button */
width: auto;
height: auto;
background-color: #7E7DE1;
max-height: 50vh;
max-width:70vw;
margin: auto;
}
.mySlides{
max-height:100%;
max-width: 100%;
height:auto;
width:auto;
}
.roll-img {
display:flex;
flex-wrap:wrap;
}
.column {
flex:1;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
</style>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="mySlides">
<img src="images/5_2.jpg">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="roll-img">
<div class="column">
<img class="demo cursor" src="images/5_2.jpg">
</div>
</div> <!--roll-img-->
</div> <!--modal-content-->
</div> <!--myModal-->
</body>
As your .modal-content width is 30%. it might help
.modal-content .mySlides img {
position: relative;
width: 100%;
height: auto;
}
to fit image in 30% width of model content
Try using
min-height: 100vh;
vh refers to the viewport height.
I am able to get the desired result by applying 4 things:
max-width: 90vw; ensures that the object will never exceed 90% of the screen width.
max-height: 90vh; ensures that the object will never exceed 90% of the screen height.
width: auto; adjusts the width to maintain the original aspect ratio
height: auto; adjusts the width to maintain the original aspect ratio
With these four combined, the object will always be fully in view and you will not need to scroll the screen.
Working example:
(open in full screen and resize vertically or horizontally to see the effect)
body {
background: #131418;
margin: auto;
padding: 0;
text-align: center;
}
.adjust {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
margin: 0 auto;
}
<img class="adjust" src="https://unsplash.it/3000/3000">
Related
There exist many similar questions, but none has yet solved my requirements:
Aspect ratio should be kept, AND
Height responsive, AND
Width responsive, AND
Full image should always be seen within the browser window (i.e. the responsiveness should be with regards to the tightest dimension).
I have achieved these requirements, but not all of them in the same time. For example:
If I let the code below as it is with
height="90%" width="auto"
then it is height responsive but not width responsive.
If I change to
height="auto" width="90%"
then it is width responsive but not height responsive.
If I change to
height="90%" width="90%"
then it is both height and width responsive, but the ratio is not kept.
To test, please "Run code snippet" and check with "Full page" the situation by changing both height and width of the browser window.
.test {
height: 90vh;
width: 90%;
background-color: #222;
color: #eee;
padding: 2rem;
}
.test img {
align-items: center;
}
<div class="test">
<img height="90%" width="auto" src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80">
</div>
I have tested in many different ways (e.g. with max-width, etc.) but not succeeded so far.
Any idea how to change the above code so that all requirements are fulfilled simultaneously?
You can use max-width and max-height together on the image then it will keep your aspect ratio and always fit on the screen with the complete image showing
body {
margin: 0;
}
.test {
background-color: #222;
color: #eee;
padding: 2rem;
height: 90vh;
width: 90%;
box-sizing: border-box;
}
.test img {
margin: auto;
display: block;
max-width: 100%;
max-height: 100%;
}
<div class="test">
<img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80">
</div>
try this in your css:
.test img {
object-fit: cover;
width: 100%;
height: auto;
}
Solution with use of aspect-ratio:
:root {
--imageWidth: 300;
--imageHeight: 150;
}
.image-container {
max-width: calc(var(--imageWidth) * 1px);
max-height: 100%;
aspect-ratio: var(--imageWidth) / var(--imageHeight);
}
.image {
display: block;
height: 100%;
aspect-ratio: var(--imageWidth) / var(--imageHeight);
}
.resize-wrapper {
display: inline-block;
resize: both;
overflow: hidden;
border: 1px solid black;
}
<div class="resize-wrapper">
<div class="image-container">
<img src="https://placehold.co/300x150/svg" class="image" />
</div>
</div>
I'm trying to figure out a way of making the image div having and keeping an aspect ratio of 3:2 with different web browser sizes (for mobile responsiveness etc). I want to be able to re-size my browser window and the image to always have a 3:2, so I want the image height to also re-size.
Is there any way of achieving this with my current code? I'd also like to be able to make the blue text div smaller without having to make the image above bigger, because if I reduce the height percentage of the blue div, I'll have to increase the picture div above to make up the 100% parent element's height, but this will throw the aspect ratio of the picture div out.
I'm not sure how to achieve this as it's more confusing than I thought.
Appreciate any help, thanks...
#bg {
width: 100%;
height: 300px;
background: yellow;
}
#window-container {
width: 30%;
height: 200px;
background: orange;
}
#img {
background: url('http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
height: 67%;
width: 100%;
background-size: cover;
background-position: center;
}
#text-wrap {
background: lightblue;
width: 100%;
height: 33%;
}
<div id="bg">
<div id='window-container'>
<div id='img'></div>
<div id='text-wrap'>text here</div>
</div>
</div>
May this be what you want?
#bg {
width: 100%;
background: yellow;
display: table;
}
#window-container {
width: 30%;
background: orange;
display: block;
}
img {
width: 100%;
height: auto;
}
#text-wrap {
background: lightblue;
padding: 10px;
}
<div id="bg">
<div id='window-container'>
<img src="https://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
You can do it with the img element and Flexbox:
#bg {
background: yellow;
}
#window-container {
display: inline-flex; /* only takes the contents width */
flex-direction: column; /* stacks children vertically */
background: orange;
}
#text-wrap {
background: lightblue;
}
img {
display: block; /* removes bottom margin/whitespace */
/*height: 66.66%; more accurate, needs to be commented out in order to work in Chrome, in FF it works perfectly, so the solution is to use properly cropped (3:2 ratio) locally stored images, luckily that's not the case with the current image*/
max-width: 100%; /* horizontal responsiveness */
max-height: 100vh; /* vertical responsiveness */
}
<div id="bg">
<div id='window-container'>
<img src="http://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
I would like to have an ADS fixed on the right side when landscape (25% width) or on the bottom when portrait (25% height).
Landscape is working fine, but on portrait it's not respecting the 25% of the main div.
<div id="container">
<div id="header"></div>
<div id="main" class="ORIENTATION">
<div id="queue"></div> <!-- 75% -->
<div id="ads"></div> <!-- 25% -->
</div>
</div>
Landscape Example:
https://jsfiddle.net/gmrn24yd/9/
Portrait Example:
https://jsfiddle.net/gmrn24yd/8/
The problem was with your header, It was taking 70px and Your #main height is 90%, It can't What if 70px is greater than 10% of the document? It will push other div down and thats why ads portions is getting cutoff. The solution is The height of #main should be based on header aswell. You can use calc function of css to calculate. Do some RnD and check browser compatibility for this. Here is the mdn documentation for calc.
Here is the solution of your problem.
*{
box-sizing:border-box;
}
#container {
width: 100%;
height: 100%;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
display: inline-block;
}
/* HEADER */
#header {
width: 100%;
height: 70px;
position: relative;
background: #ed1c24;
padding: 20px 0;
}
/* MAIN */
#main {
width: 100%;
height: calc(100% - 70px); /*Calculate height based on header*/
position: relative;
text-align: center;
}
/* MAIN LANDSCAPE */
#main.landscape {
display: inline-block;
}
#main.landscape #queue {
width: 75%;
height: 100%;
float: left;
}
/* MAIN PORTRAIT */
#main.portrait {
display: block;
}
#main.portrait #queue {
width: 100%;
height: 75%;
}
/* LANDSCAPE ADS */
#main.landscape #ads {
width: 25%;
height: 100%;
float: right;
background: #000;
}
/* PORTRAIT ADS */
#main.portrait #ads {
width: 100%;
height: 25%;
background: #000;
}
<div id="container">
<div id="header"></div>
<div id="main" class="portrait">
<div id="queue"></div>
<div id="ads"></div>
</div>
</div>
He doe's respect the height, it's just you can't see it because his bottom area is out of the body and his position is fixed. If you use chrome and you know how to see the width and the height of the element you will see it. Look the images:
I could not see any problem while running this code. Only thing since you have given 100% height and width for the container view is cut off. You can verify the code by providing a fixed width and height for the outer container
I have a div that should always be in the center of the browser. now there's an image that will always be in the middle of the browser. but problem is that a div is 960px wide and but the picture is 1263px. how do I solve the problem? what I still need is dead as soon as the browser window smaller, should come scrollbars only at 960px. I know that I could theoretically solve anything, if I image Tell css as a background-image integrate the. but that does not work, unfortunately, because I really need the img tag
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
http://jsfiddle.net/UcLnD/
Try with this:
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.header-bottom-wrapper{
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {
margin-left: -152px;
}
Im not sure what you mean by not using Css for your fix. But does the image need to stay the same size? If you want the image to resize based upon browersize add this to your Css:
.header-bottom-wrapper img {width:100%;}
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {width:100%;}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
you can use negative margin to virtually reduce space needed by image.
<div class="clipimg">
<img src="imagetoowide-1000px" />
</div>
.clipimg {
width:500px;
text-align:center;
}
clipimg img {
margin:0 -50%;
}
Tune negative margin for both right/left and text-align.
Example here centers image and clips sides
examples : http://codepen.io/gc-nomade/pen/hjyEv/
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}