I have the following html:
<div class="me">
<img src="IndianRemovalAct-final.jpg">
</div>
and the following styles:
.me {
position: fixed;
height: 100%;
width: 100%;
}
/* method 1*/
img {
width: 100%;
height: auto;
}
/* method 2*/
img {
width: auto;
height: 100%;
}
I tried the above two ways to make the image responsive. However, if I make the browser narrower or shorter, part of the image is outside the viewport. I want to display the image fully and responsively inside its fixed-positioned container. The image is quite big and I am just doing the implementation.
I went a different route since I'm assuming that you want to maintain the aspect ratio of the image:
.me {
position: fixed;
height: 100%;
width: 100%;
background: url('http://placehold.it/350x150') no-repeat center center fixed;
background-size: cover;
}
<div class="me"></div>
Example: http://jsbin.com/woqijaxoqu/edit?html,output
is what I'm suggesting what you want?
<div class="me">
<img src="https://unsplash.it/900/900">
</div>
.me {
position: fixed;
height: 100%;
width: 100%;
}
img {
max-width: 100%;
}
Here is the solution that seems working. Based on input from responses to my post.
img {
max-width: 100%;
max-height: 100%;
}
This solution was based on folks suggesting "max-".
Thank you, SO folks!
Related
I've used this code to automatically resize the image to fit the container it's in, this code is working in other areas of my site, so I have no idea why it's not working here. Am I missing something?
<div className='image-container'>
<img src={imageRoutes} alt='post' />
</div>
.image-container {
position: relative;
height: 400px;
width: 100%;
margin-top: 10px;
overflow: hidden;
}
.image-container img {
max-height: 100%;
max-width: 100%;
}
It's displaying the image to fit the container corner to corner without maintaining it's initial pixel ratio, so essentially it's stretching the images to 100% of the container width and a height of 400px.
instead of :
.image-container img {
max-height: 100%;
max-width: 100%;
}
do:
.image-container img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
Goal is to render an object without letterboxing, as long as the aspect ratio is within given limits, such as between 16:9 and 4:3.
For example, when the available width of a 16:9 image is reduced below 16:9 aspect ratio, we want to clip the left and right side of the image. If the width is further reduced below 4:3 aspect ratio, we want to keep that aspect ratio and start scaling down.
In this example, you can see how the object scales. The problem with this approach is that scaling happens immediately, as soon as the available space is even one pixel off.
.iframe {
border: 1px solid black;
width: 350px;
height: 350px;
resize: both;
overflow: auto;
}
.wrapper {
background-color: #c05046;
height: 100%;
display: flex;
}
.image {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
<div class="iframe">
<div class="wrapper">
<img class="image" src="https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg">
</div>
</div>
[An iframe is simulated in the examples and you can change its size for changing the available space.]
The fluid-ratio trick as explained at https://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios can somehow achieve scaling between 2 ratios, but has several shortcomings:
It works with a fixed height and only scales width, which makes it work horizontally, but not vertically.
The object is not an arbitrary object but rather a background-image, which means this trick probably won't work with video and other objects.
.iframe {
background-color: #c05046;
border: 1px solid black;
width: 350px;
height: 350px;
resize: both;
overflow: auto;
}
.column {
max-width: 640px;
}
figure.fluidratio {
margin: 0;
padding-top: 15%; /* slope */
height: 240px; /* start height */
background-image: url(https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg);
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
<div class="iframe">
<div class="column">
<figure class="fluidratio"></figure>
</div>
</div>
I saw somebody suggest using embedded SVG, but didn't get the examples to work.
Any feedback appreciated.
If I understood the problem right, you want to achieve something like this:
.iframe {
border: 1px solid black;
width: 100%;
height: 100%;
}
.container {
width: 100%;
max-width: 130vh;
position: relative;
margin: 0 auto;
}
.wrapper {
background-color: #c05046;
height: 0;
padding-top: 75%;
position: relative;
width: 75%;
left: 50%;
transform: translateX(-50%);
max-width: 640px;
}
.image {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
<div class="iframe">
<div class="container">
<div class="wrapper">
<img class="image" src="https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg">
</div>
</div>
</div>
*the resizing is disabled here, please check in full screen with responsive mode.
Using inner .wrapper, it keeps the part with ratio of 4/3 always visible, but it allows the content to overflow it boundaries. By max-height: 130vh its height keeps scaling also. As it is not based on background-image, it can be used with video as well as image.
The main disadvantage is using a vh unit what keeps it relative to view port size, to parent container height. -> see comment
How to prevent my images from stretching on the sidebar in blogger? I've tried many different CSS for example:
.container {
max-height: 400px;
max-width: 400px;
}
The thumbnails are still stretched and I've tried the overflow:hidden; property as well, which works but cuts out too much of the image and I'd much rather them be resized.
Here's the HTML:
<div id="container">
<img src="http://2.bp.blogspot.com/-THybP4vxGMA/VpwN3LXD-jI/AAAAAAAAAcA/kpZkxwEH9P8/s1600/4afd422d987dac3041f33ffbf34f9367.jpg"/>
</div>
You have to add max-width: 100% and max-height: 100%; to the image in order to not overflow the container. You also have to change max-width and max-height in the #container to width and height. Finally, you used .container instead of #container.
#container {
height: 400px;
width: 400px;
}
#container img {
max-width: 100%;
max-height: 100%;
}
<div id="container"><img src="http://2.bp.blogspot.com/-THybP4vxGMA/VpwN3LXD-jI/AAAAAAAAAcA/kpZkxwEH9P8/s1600/4afd422d987dac3041f33ffbf34f9367.jpg"/></div>
I've figured a solution:
#container {
width: 150px;
height: 150px;
display: block;
position: relative;
overflow: hidden;
}
#container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I have few thumbnail image of users and their image can be portrait or wide.
I wish the thumbnails to be in a circle without lose the aspect ratio of it.
So I created a container for each image like that:
<div class='container'>
<img src='' ... />
</div>
With this css:
.container {
border-radius: 50%;
overflow: hidden;
position: relative;
width: 50px;
height: 50px;
img {
width: inherit;
}
}
it works fine with portrait images because the image width inherit from the container.
The problem now is to adapt the same to wide images... I should replace the width with height in order to let in work as expected.
There is a better solution of mine?
Or there is a way with Less to achieve at this?
You should leave the width/height unset and set the max-width/max-height to 100%.
img {
max-width: 100%;
max-height: 100%;
}
This will only downscale images though, not upscale.
width: fit-content; height: fit-content;
.container{
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
}
.container > img{
object-fit: cover;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='http://searchengineland.com/figz/wp-content/seloads/2015/12/duckduckgo-logo-wordmark4-1920.png' alt='duck power'>
</div>
I have a fixed header that i want to keep behind the container div as I scroll down the page. as seen on http://www.madebydaryl.co.uk/. It's sorta working except the background of the content div seems to be hidden behind the background of the header. Not sure how to solve this..
My css:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}
.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}
EDIT:
This kinda worked:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;
display: table;
top:0;
left:0;
}
.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}
Except the background of the container div doesnt stretch to cover all of the content, just the height of the viewport. Any ideas?
The effect that you are talking about is known as Parallax Sliding effect,
Check it here
http://stephband.info/jparallax/
or
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307
Alas, such a simple solution.
Just put another div inside the container div, and give it the background color.
so:
<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>
and the same css except move the background to the .bg.