I'm trying try to show a couple of images at 65% of their original size using this CSS rule:
div#midline .artistEntry img {
height: 65%;
width: 65%;
}
It seems to work fine in IE and Firefox
But in Chrome it looks terrible. It seems that the width of the image has been correctly reduced, but the height has actually been expanded.
Is there a way to proportionally resize an image using CSS that works in all modern browsers? If not, I'd (relucantly) consider a JavaScript/jQuery solution
#midline .artistEntry img {
height : auto;
width : 65%;
}
Setting one of the dimensions to auto (which is the default) should keep the aspect ratio intact while stretching the other dimension to a percent of it's parents dimension.
Here is a demo: http://jsfiddle.net/Mu6h7/ (re-size the preview panel to see the aspect ratio stay intact)
remove the height or width rule. By defining height and width, it will grab both of those, if you remove one it will scale correctly.
Related
REFERENCE: http://www.templatewire.com/preview/landscaper/
I want to make a web page, and in that page, I want to have divs/sections each the size of the screen.
Now, I mean, the width and height of the monitor, and it won't resize again, and will stay the width and height of that monitor, regardless of the browser size, and regardless of how much content is inside it.
The link shows you what I mean, but I have a 1920x1080 browser window, you can see the top and bottom of the sections above and below it. I don't want the top and bottom of neighbouring sections to be seen if the monitor is very big, nor do I want the section to not be fully visible if the monitor's too small.
Example, say I had 5 sections like in the reference, and my browser window was 1920x1080, the overall height of that document would be 1920*5400.
(I want it to be the height of the screen minus the height on the nav bar.)
You can use Viewport units (the browser window size). 100vh is the height of the screen. If you got sections that bigger than the height of little screen you can use the min-height property and set it to 100vh.
Since you didn't place your code, this is generally example of use case:
section { min-height: 100vh;}
Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Good luck!
It appears you're looking for viewport percentage lenghts.
To give any element current viewport's height, in CSS, one should use:
your-selector {
height: 100vh;
display: block;
}
If the element is a <div> or any other element with a default value of block for display, it obviously doesn't need the second rule.
See it working:
your-selector {
height: 100vh;
display: block;
transition: background-color .3s linear;
}
/* let's add a hover, for testing */
your-selector:hover {
background-color: red;
}
body {
margin: 0;
min-height: 200vh;
}
<your-selector>Test</your-selector>
Note: you can also apply viewport percentage lengths to other properties, such as min-height, max-height, etc...
Note: although default viewport is browser window, that's can change. For example, 3d transforms turn any regular DOM element into a viewport for their children, affecting behavior of viewport percentage lengths, as well as behavior of position:fixed in any of their children.
I wonder how to fit background images perfectly like Apple.com does on different screen sizes and devices (see Example)
Example
The red circles (edges of the MBP) are always on the edge of the screen on smaller devices but on larger screens, more width of the image is displayed.
The image is 2560x882 and the width of the MBP is 1045px.
I also noticed that on very high resolution they swap the image to a larger one that is double the size. How can I achive this?
For images you can use
img { max-width: 100%; height: auto; }
For background image you use:
div { background-size:cover; } /* background-size: "contain" | "100%/100%" | "100%" is also an option according to requirement. */
I have an image in a table. Specifically a graph of profiling information that might be quite tall (one vertical pixel is data from one source, one horizontal pixel is one unit of time). I'ld like to specify a maximum height for the image and re-scale it vertically so that it can't extend too far down the page. But I want to preserve the width (the page can scale horizontally). i.e. I specifically want to change the aspect-ratio of the source image.
My html looks, vaguely like this and it mostly works.
<style>
img.capped {
max-height : 500px;
width : 100%;
}
</style>
...
<tr><th>Profile</th></tr>
<tr><td><img src=... class=capped></td></tr>
However if the image's width is less than the width of the string "Profile" my image gets scaled upward horizontally and vertically.
Is there a way, using CSS, to cap the vertical size of an image, resizing if necessary, but leave the width alone?
You can force the width by using min-width
img {
max-height: 100px;
min-width: 100%;
}
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
I have slider populated with images in containers and every container has display inline-block.
Main slider has fixed width (for example 768px) and adjustable fixed height. I want child images and its containers fit in that height, and keep image proportions. When i change main slider height dynamically in developer tools or with Javascript, image container divs stay with same width and I have some empty space between every image in line (Images inside containers are scaled and keeps aspect ratio).
I try with:
.image{
display: inline-block;
width: auto;
height: 100%;
}
but problem persists.
Can I fix that only with CSS?
FIDDLE
You have to force the .image element to recalculate its size in any case i think that you have to use js
you can do this:
function reduceHeight() {
document.getElementById("container").style.height = 200 + "px";
$(".image").css('height', 200);
}
or:
JS
function reduceHeight() {
document.getElementById("container").style.height = 200 + "px";
$("container").addClass('reduced');
}
CSS
.reduced .image{
height: 99%;
}
Anyway I hope you take the idea, just force it to change its size, changing properties like padding, border, works too.
I hope this helps
I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info