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
Related
I have a simple webpage with a main section that is 85vh and a "floor" which is 15vh. The floor element contains an image which I want to look like the floor of the page. It has a checkerboard pattern that fades to white and looks like a floor.
My current CSS is working pretty well, however, the problem I'm having is when the user makes the window skinny (less than 800px or so in width), the floor image stars to become really small and it doesn't look good and it doesn't look like a floor anymore.
What changes should I make to the CSS to make the image in the floor element looks like the "floor of the page", no matter what the width or height of the window is? It should probably be centered and adapt to the window width, but not get smaller than 1920px or so the floor looks the same size at any window width, but gets cropped automatically to adapt to the page width.
https://jsfiddle.net/z7w41vd5/
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
.main {
height: 85vh;
}
.floor {
height: 15vh;
min-width: 1920px;
width: 100vw;
}
.floor img {
width: 100%;
}
<div class='wrapper'>
<div class='main'>
</div>
<div class='floor'>
<img src='https://i.imgur.com/VuLVv68.png'>
</div>
</div>
Make it a background image instead of an <img /> and you'll be able to control it the way you want to.
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
.main {
min-height: 85vh;
}
.floor {
min-width: 1920px;
min-height: 15vh;
background: url(https://i.imgur.com/VuLVv68.png) bottom center;
}
<div class='wrapper'>
<div class='main'></div>
<div class='floor'></div>
</div>
Alternatively, you could make it the background of the <body> and remove the floor element from your html entirely.
html {
height: 100%;
}
body {
background: url(https://i.imgur.com/VuLVv68.png) bottom center no-repeat;
min-height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
<div class='wrapper'>
<div class='main'></div>
</div>
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 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>
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;
}
I'm trying to center an element (im my case an image) with arbitrary size inside a box. Everything works fine in Webkit browsers, but Firefox stretches images that are longer than they are wide.
To illustrate the problem, I create 3 div as boxes, each of containing a differently sized image. The boxes are all set to a fixed width and height, and a couple of flexbox rules are applied to center the image both vertically and horizontally.
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 100px;
height: 100px;
border: 1px solid black;
justify-content: center;
align-items: center;
float: left;
margin-right: 50px;
}
.box img {
max-width: 100%;
max-height: 100%;
}
<div class="box">
<img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/150x300/eeeeee.png">
</div>
The img should be shrunk such that they exactly fill the box (either horizontally or vertically, which ever side is longer), but preserving the aspect ratio. This is exactly what happens in Webkit browsers. However, Firefox just stretches the one image that is longer than high in vertical direction. How can I make Firefox behave the same way as all the Webkit browsers?
Using "object-fit: contain" for the images seems to do the trick :)
.box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
http://jsfiddle.net/xjwguxs6/
Setting flex-basis: 100% fixes the issue as it sets the initial main size of the flex item. If the flex-direction is reversed i.e. column, you will need to use flex-basis: 100% on nth-child(3)
.box:nth-child(2) img {
flex-basis: 100%;
}
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 100px;
height: 100px;
border: 1px solid black;
justify-content: center;
align-items: center;
float: left;
margin-right: 50px;
}
.box img {
max-width: 100%;
max-height: 100%;
}
.box:nth-child(2) img {
flex-basis: 100%;
}
<div class="box">
<img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/150x300/eeeeee.png">
</div>