I have an <img> inside a <div> with display: flex. The images is resizing without keeping the aspect ratio but when I reload the page it appears resized properly. Why does this happens and how can I resize the image inside a <div> with display: flex properly without refreshing the page?
Here is a .gif of the issue:
Here is the code:
UPDATE: The default code snippet from stackoverflow seems to resize properly until 220px height but the reported issue happens in codepen (https://codepen.io/guizo/pen/XKPdKK?editors=1100#0) and if I open the html file on Chrome, Firefox and Edge.
* {
margin: 0 !important;
padding: 0 !important;
}
html, body, div {
width: 100%;
height: 100%;
}
div {
display: flex;
justify-content: flex-end;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="content">
<img src="https://pixabay.com/static/uploads/photo/2016/01/19/18/00/city-1150026_960_720.jpg" alt="" />
</div>
Related
I made an SVG image, but when I add it to a page and set the width value to 100%, it still doesn't extend over the entire width of the page, there is still small gaps that remain at the edges.
I tried to change value to 100vw but then the image is widther.
When I fullscreen the page then everything is okay.
IMG
HTML:
<footer>
<div class="footer-top-shape">
<img class="footer-top-shape-img" src="./svgs/footershape26.svg" alt="Footer shape">
</div>
<div class="footer-container">
<div class="footer-content">
CSS:
footer{
height: auto;
width: 100%;
background-color: #0a2233;
}
.footer-top-shape-img{
width: 100%;
height: auto;
}
.footer-container{
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
I suppose you are using Chrome. The problem could be then in the way (bug if you want) the Chrome processes .svg because FF seems to show it correctly without any margins.
I've found this answer: background-size:100% 100%; doesn't work properly in Chrome
Edit your .svg and add the property preserveAspectRatio="none" into the <svg> element.
I have a problem with a div. It looks like this:
<div fxLayout="column" fxLayoutGap="20px">
<h1 class="mat-display-1">Welcome to $TITLE$</h1>
<img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/>
</div>
Everything works ok on chrome and firefox, but on edge the image resizes depending on the length of the h1 tag. Here's the CSS:
.logo {
max-width: 300px;
max-height: 90px;
display: block;
width: auto;
height: auto;
margin: auto;
}
and the div:
flex-direction: column;
box-sizing: border-box;
display: flex;
On edge image is like:
And chrome:
Why is edge making the image bigger? How can I solve it?
Use object-fit: contain; in logo class
I have an image in a container div below which is a div containing text that can scroll. The image can vary in size so the height of the image will vary depending on the image being displayed i.e. it isn't always 400 x 200 as in my example.
My problem is that when the text scrolls there is a space between the image and the point where the text should scroll behind the image. This seems to be because the image container div is not the same size as the image.
This JSFiddle shows the problem https://jsfiddle.net/t0ag2z5k/50/
Can anyone tell me both why this is happening and how to fix it please?
CSS code below...
#plotdetails {
display: flex;
flex-direction: column;
float: left;
width: 400px;
z-index: 5;
position: fixed;
height: 100%;
}
#plotdetails #plot-img-container {
display: inline-block;
}
#plotdetails #plot-img-container img{
width: 400px;
display: inline-block;
}
#details-text {
padding: 0 20px 0 20px;
overflow-y: scroll;
flex: 1;
}
HTML here
<div id="plotdetails">
<div id="plot-img-container">
<img src="http://placehold.it/400x200">
</div>
<div id="details-text">
<h1>Lot's of words here....</h1>
</div>
</div>
Why do you want your image to be display as an inline-block when it's not utilized as such? Try (https://jsfiddle.net/t0ag2z5k/52/):
#plotdetails #plot-img-container img{
width: 400px;
display: block;
}
Note: I asked a very similar question recently, but was downvoted as I used an external URL as supposed to JS fiddle
I have the following code:
HTML:
<div id="homepage-banner-contents">
<div>
<img src="http://s.hswstatic.com/gif/whiskers-sam.jpg" alt="logo" id="banner-logo"/>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#homepage-banner-contents {
height: calc(100% - 60px);
background: red;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
#banner-logo {
max-height: 320px;
}
#banner-logo {
max-height: 320px;
max-width: 100%;
}
https://jsfiddle.net/anik786/9vd83rww/
Goal
My goal is to keep the image in the centre of the red background and for the image to shrink when the height of browser becomes too small.
What actually happens
Although the above code is okay for normal screen sizes; when the browser height is reduced too much, the image does not seem to shrink at all, but instead insists on keeping its same size, causing overflow.
Is this what you are looking for? https://jsfiddle.net/9vd83rww/2/
#banner-logo {
height: calc(100vh - 80px);
max-width: 100%;
}
Heres my CSS that I have for my img syntax. However, it should responsively resize while the browser resize. This works in Chrome, but IE & FIREFOX for some reason aren't working - is there a reason why? I am using the latest of all.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
The img max-width: 100% is a good technique for responsive images, but it needs to work together with the image container - element that holds the image / wraps it - for you to see the responsiveness of it in action.
Try this and you should get it working cross browsers:
<div class="imgHolder">
<img src="http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>
So your image is wrapped with a div. And the CSS would be:
.imgHolder{
width: 100%;
max-width: 1000px;
padding: 10px;
border: 3px dashed red;
margin: 10px auto;
}
.imgHolder img {
max-width: 100%
}
You can check the codepen here