I'm trying to dynamically scale down variable portrait and landscape images to fit proportionally within a browser window.
My current image resizing attempt is here: http://jsfiddle.net/6pnCH/4/
I need the image already scaled vertically when the browser loads.
At the moment i only have it started to scaling when onBrowserResize is fired.
Also the image seems to be stretching and warping on resize and i need to keep them proportional.
Pretty sure Javascript is the key to solve this, but my knowledge of it is fairly limited so any help would be greatly appreciated.
Javascript Code:
$(window).resize(function(){
$('.slide img').css({
maxHeight: $('.slide').height() * 0.8,
maxWidth: $('.slide').width() * 0.8
});
});
CSS Code:
#slide {
text-align: center;
background-color: green;
height: 100%;
width: 100%;
display: inline-block;
}
.slide {
vertical-align: middle;
display: table-cell;
}
.slide:after {
content: ' ';
height: 100%;
display: inline-block;
vertical-align: middle
}
.slide img {
vertical-align: middle;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
HTML Code:
<div id="slide" class="slide"><img src="image.jpg"></div>
Here is the updated Fiddle
You do not need to use Javascript this time.
You do not want to stretch the img so dont use width and height applied to it, look.
Only CSS still can do the trick:
#slide {
text-align: center;
background-color: green;
height: 100%;
width: 100%;
display: inline-block;
}
.slide {
vertical-align: middle;
display: table-cell;
}
.slide:after {
content: ' ';
height: 100%;
display: inline-block;
vertical-align: middle
}
.slide img {
vertical-align: middle;
max-width: 100%;
background-color: blue;
padding: 10%; //here is the trick
}
this illustrates perfectly what i was after and done without javascript after all!
http://codepen.io/jasonbradberry/pen/sHJhl
for anyone else after the same thing my amended code would look like this:
.slide img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto;
}
How about if you use css3 background-size: cover or background-size:contain ?
something like this:
<div style="width:100%; height:100%; background-size:cover; background-image:url(YOUR_IMAGE.jpg);"></div>
Related
I have an element which has overflow: scroll both on y and x axes, however when the element is on mobile version it has a weird touch behavior, it allows the user not only to move the element horizontally and vertically, but also to any other direction, like diagonally, for example.
I'd like to make it respect the axes and only move up-down/down-up and right-left/left-rigth.
How could I fix this?
I added a snippet, but I got this example from Css Tricks. It can be seen on mobile version with multiple versions of touch-action, none of them satisfied what I need to do.
body {
display: flex;
flex-wrap: wrap;
}
.map {
margin: 1rem;
width: 300px;
height: 300px;
overflow: scroll;
position: relative;
margin-bottom: 15px;
}
.map img {
width: 1200px;
height: 1200px;
}
.map-desc {
position: absolute;
width: 100%;
text-align: center;
font-weight: bold;
top: 130px;
font-size: 24px;
}
.touch-auto {
touch-action: auto;
}
<div class="map touch-auto">
<img src='https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<code class="map-desc">touch-action: auto;</code>
</div>
trying to create a new layout but have run into an issue.
Currently, i have a fixed sidebar to the left and then the content floated right.
The side bar has a width of 18%, and then the other content 82% width.
This works fine, but it looks ugly and is unstable at larger screen sizes.
I wish to however to make a change, and make the sidebar a fixed width. This poses a problem then on the other content which i want to take up the rest of the room.
How can i have the content to the right, to still take up the rest of the room whilst keeping a fixed sidebar?
Hope this makes some sort of sense!
Here is a js fiddle of the problem i face:
http://jsfiddle.net/Uyv6w/
And what i current do:
http://jsfiddle.net/Uyv6w/1/
Layout is like so:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
I guess I'm not exactly sure what you're looking for - but I tried with this FIDDLE.
I floated the major divs left, then just gave a min-width and max-width to the container.
Could you provide some more details?
CSS
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
min-width: 600px;
max-width: 1200px;
}
#sidebar {
float: left;
height: 100%;
width: 100px;
background-color: #9b59b6;
}
#content {
float: left;
width: 82%;
background-color: red;
overflow: hidden;}
#inner {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: gray;
height: 1000px;
padding: 10px;
}
img {
display: block;
width: 300px;
margin: 20px auto;
}
here is what I created http://jsfiddle.net/ZygnV/
<html>
<head>
<style type="text/css">
html, body{
margin: 0;
padding: 0;
height: 100%;
}
.main-content-wrapper{
height: 100%;
overflow-y: hidden;
white-space: nowrap;
}
.main-sidebar{
display: inline-block;
height: 100%;
width: 220px;
background-color: rgb(0,0,0);
}
.main-content{
display: inline-block;
height: 100%;
width: 10000px;
}
</style>
</head>
<body>
<div class="main-content-wrapper">
<nav class="main-sidebar">
</nav><section id="main-content" class="main-content">
</section>
</div>
</body>
the problem is that little vertical scroll: I would like to not have it.
Why this little bug? And how can I fix it? I thought to set overflow-y:hidden but I don't think it's the best solution: if I would set a min-height and then display the scroll it would be always hidden (unless I act with a js script)
There shouldn't be vertical scroll in the first place.
The reason behind it is that both nav and sectionare display: inline-block, so spaces in code formatting affect layout. There are various ways to solve the problem, one of them would be to set font-size: 0 on .main-content-wrapper and desired font-size on children.
JSFiddle.
Alternatively, you can use different approach to place sidebar and content, flexible boxes perform extremely good in this scenario.
This could help you
.main-content {
display: inline-block;
height: 100%;
position: absolute;
width: 10000px;
}
.main-sidebar {
background-color: #000000;
display: inline-block;
height: 100%;
position: absolute;
width: 220px;
}
Add overflow:hidden to main div
.main-content-wrapper{
height: 100%;
white-space: nowrap;
overflow:hidden
}
DEMO
I'm looking for an easy solution to implement the below. Thumbnails will not be cropped but the container they are in will always be the same height/width.
The idea is that images larger than the container would be responsive (ie. scale down), while images that are smaller than the container will be shown "as is."
The problem I'm having is three-fold:
How to handle the responsive element, since we need to account for various aspect ratios (ie. horizontal vs vertical vs square)
How to vertical align when necessary
Images that aren't larger than their container natively shouldn't scale up
Obviously, it would be great if this could be done with CSS only, but I understand javascript might be needed. If that's the case, I'm looking for a lightweight solution since the grid of thumbnails could get quite lengthy.
Any thoughts?
A pure CSS solution:
demo
.container {
display: inline-block;
position: relative;
width: 8em; height: 10em;
}
.container img {
position: absolute;
top: 50%; left: 50%;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
transform: translate(-50%, -50%);
}
The images keep their natural size (width: auto; height: auto;) unless they are bigger than the container (max-width: 100%; max-height: 100%;), in which case they are going to take the size of the container that they exceed and scale the other one accordingly.
Positioning the images in the middle of the container: give them position: absolute and put their top left corner in the middle of the container (top: 50%; left: 50%;). Then translate them left and up by half their computed dimensions, whatever those would be (transform: translate(-50%, -50%);).
This solution works in browsers supporting 2D transforms. Sadly, this excludes IE8 and older and Opera Mini.
A better compatibility solution (that I cannot actually test right now in IE8, so I'm just assuming it should work there too) would be:
demo
.container {
display: inline-block;
width: 8em; height: 10em;
text-align: center;
white-space: nowrap;
}
.container img {
display: inline-block;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
.container:after {
display: inline-block;
height: 100%; width: 0;
vertical-align: middle;
content: "";
}
First of all, give images display: inline-block;.
Set text-align: center; on container so that images that are less wide than the container get centred horizontally.
Now to make sure they are in the middle vertically as well. Give them vertical-align: middle;, but that's not enough. inline-block elements are vertically aligned with respect to their inline-block siblings and we have no siblings in this case. So we also need another middle vertically-aligned inline-block element that has the same height as the container. Or a pseudo-element on the container, it's the same thing.
This pseudo-element is going to have height: 100%; so that its vertical middle coincides to that of its parent and width: 0; so that it doesn't affect the horizontal alignment of the image (when the image's natural width < the container's width). It's also going to have display: inline-block; and vertical-align: middle; just like the image.
We also need white-space: nowrap; on the container to prevent the pseudo-element from moving below (and not affect the vertical alignment of the image this way) when the image occupies the entire width of the container.
This is actually the first question I asked on Stackoverflow! Now I know Ana has already come up with a working solution, I thought I'd also post mine that works IE8 onward:
http://jsfiddle.net/crtpq2jg/
Basic Markup:
<div class='container'>
<img src='http://www.lorempixel.com/100/200' />
</div>
CSS:
.container {
float: left;
width: 180px;
height: 210px;
text-align: center; /* to center align horizontally */
line-height: 210px; /* Equal to container height */
font-size: 0; /* This is to eliminate a weird ~2px vertical offset on the images. But you can just specify the font-size for any children elements that may contain text. */
}
.container > img {
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
This will work in IE 8 (demo)
Html from ana's answer
The trick is to use the after pseudo element to extend the containers line-height to its own height.
This way you can use regular text-align and vertical-align along with max-width and max-height.
.container {
display: inline-block;
position: relative;
border: solid .25em deeppink;
width: 8em;
height: 10em;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.container img {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.container:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
Have a look at this jsfiddle: http://jsfiddle.net/jQN4L/
The max-width and max-height cause the image to scale down if needed, but not scale up. Horizontal centering is done with text-align. Vertical centering is done with line-height and vertical-align, although this method does require that the container has a known height.
HTML:
<div id="d1">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
<div id="d2">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
div {
text-align: center;
font-size: 0;
}
#d1 {
width: 200px;
height: 100px;
line-height: 100px;
background: red;
}
#d2 {
width: 100px;
height: 200px;
line-height: 200px;
background: green;
}
Changing my answer- should have read the question better!
html:
<div class="img_wrapper">
<img class ='full_width' src="1.png" />
<img class ='full_width' src="2.png" />
<img class ='full_width' src="3.png" />
</div>
css:
.img_wrapper {
width: 860px;
margin: 30px;
}
.full_width {
width: 200px;
height: 200px;
float: left;
margin: 10px;
vertical-align: middle;
}
.full_width img {
max-width: 100%;
max-height: 100%;
}
I am trying to create a two-column, full-screen magazine viewer, with a fixed width banner on the left. The right column will be responsive.
Utilising the display:table; method I have created the following:
http://jsfiddle.net/pouncebounce/pTeBP/2/
HTML
<div class="tbl_con">
<div class="tbl_row">
<div class="tbl_cell" id="banner">
</div>
<div class="tbl_cell" id="publication">
</div>
</div>
</div>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("b129d2b8");
viewer.setParentElementID("publication");
viewer.show();
</script>
CSS
* {
margin: 0;
padding: 0;
border: none;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.tbl_con {
display: table;
width: 100%;
min-height: 100%;
*height: 100%;
}
.tbl_row {
display: table-row;
width: 100%;
min-height: 100%;
*height: 100%;
}
.tbl_cell {
display: table-cell;
min-height: 100%;
*height: 100%;
}
#banner {
width: 200px;
background-color: #1E90FF;
border-right: solid 3px #fff;
}
#publication {
width: *;
background-color: #FFAB1E;
}
This displays correctly in the latest version of IE and Chrome, but not in Firefox, where the 100% heights, or the actual magazine, do not appear at all. Any reason why?
Change *height to height and remove min-height.
Make sure you test in IE7, but it should work.