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%;
}
Related
For the desktop landing page, I want this composition of images to maintain it's height in relation to the browser height (75vh), otherwise this landing collage will become too horizontal/skinny as someone shrinks the width of their browser.
As it changes proportion with the page getting wider or narrower, I want the images inside to be cropped, not stretched.
I figured out a way to crop them, but only if I set an actual px height to the images. I don't want that. I want the height to be in proportion to the browser height. If I make the divs they're in a ratio of the height of the browser, then the images just stretch inside to fit the div.
<div class="landing">
<div class="landing-side"><img src="landing-1.jpg" alt=""></div>
<div class="landing-side"><img src="landing-2.jpg" alt=""></div>
<div class="landing-center"><img src="landing-3.jpg" alt=""></div>
<div class="landing-side"><img src="landing-4.jpg" alt=""></div>
<div class="landing-side"><img src="landing-5.jpg" alt=""></div>
</div>
.landing {
position: relative;
width: 100%;
height: auto;
display: flex;
}
.landing img {
width: 100%;
height: auto;
display: block;
}
.landing-center,
.landing-side {
height: 75vh;
display: flex;
flex: 1 1 auto;
overflow: hidden;
justify-content: center;
}
.landing-center {width: 40%;}
.landing-side {width: 15%;}
Here is how I did it before - at a certain browser width, the height would be fixed in px, then the side images would start getting cropped*. This is OK, but then I'd have to do make it hop to various specific image heights at different widths. Whereas I want the height of the whole larger container of images to change as the browser changes proportions.
.landing {
position: relative;
width: 100%;
display: flex;
}
.landing img {
width: 100%;
height: auto;
display: block;
}
.landing-center,
.landing-side {
display: flex;
flex: 1 1 auto;
overflow: hidden;
justify-content: center;
}
#media screen and (max-width: 1536px) {
.landing-center {flex-shrink: 0;}
.landing-center img,
.landing-side img {
width: auto;
height: 400px;
}
}
*(Note: I'd prefer that only the side images get cropped in the first code example as well, but that may complicate things too much for this one question.)
To croping an image, you need to use overflow: hidden;
just like:
.croped-content {
position: relative;
width: 25vw;
height: 70vw;
border: 2px solid red;
overflow: hidden;
}
.croped-content img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="croped-content">
<img src="https://cdn.pixabay.com/photo/2017/10/06/07/29/guava-2822182_1280.png" alt="guava">
</div>
All I had to do is put the vh here, instead of the px. This works now. I got all mixed up trying too many ways to make this work that I missed the fact that I had put the height attribute to the container instead of the image.
.landing-center {flex-shrink: 0;}
.landing-center img,
.landing-side img {
width: auto;
**height: 75vh;**
}
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!
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>
Safari for Windows is not calculating img height correctly within absolutely positioned div. The styling works fine on Chrome and Firefox.
http://jsfiddle.net/Wh2Tr/
HTML:
<div class="image">
<div class="image-inner">
<img src="http://lorempixel.com/400/200" />
</div>
</div>
CSS:
.image {
position: relative;
max-width: 100%;
height: 0;
padding-bottom: 75%;
}
.image-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.image img {
width: auto;
max-height: 100%;
margin: 0 auto;
display: block;
}
Caveats:
This is a simplification of the HTML. There are multiple images of varying sizes which need to have the same height (so using width:100%;height:auto; won't work)
This needs to be adaptive/responsive, so I can't set an explicit width or height to the image or container.
Same problem, I've used jquery. I couldn't find any solution till now:
$('.image-inner').css('height','100%').height($('.image-inner').height());
On the class image put height to auto. That should fix it. http://jsfiddle.net/Wh2Tr/1/
.image {
position: relative;
max-width: 100%;
height: auto;
padding-bottom: 75%;
}