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.
Related
I put three photos inside a container but since I want there to be space between them, I couldn't leave the original size because they would take up the whole container without leaving the space I want.
To make them smaller I modified the height to 80%.
It worked but since I need to add the shadow to the box, I need it to match the edges of the image.
As you can see from the purple, the box is larger than the actual image. I would like to know how to get a box as big as the actual image, so without the purple section.
I added the background color only to the first pic, but the problem can be extended for all the three pics.
I post the code below.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background * {
width: 100%;
height: 80%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
<div class="background">
<div class="firstphoto"></div>
<div class="secondphoto"></div>
<div class="thirdphoto"></div>
</div>
Thanks all! ;)
You can take a look at object-fit property: https://www.w3schools.com/css/css3_object-fit.asp
Also, you should put:
.background > * {
flex: 1/3;
}
So that the boxes are taking the same space.
you should add this to each div that contains an image (if they have the same class)
The div would then be positoinned relatively to the image and you could then edit the box-shadow with the box-shadow property
.col{
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
margin-right:3.33%;
box-shadow: 10px 10px 10px 10px red;
}
Not sure why you're having the images as background images, but I would just use object-fit. Do note, I replaced the divs with image tags.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background img {
width: 100%;
height: 80%;
padding: 1rem;
box-sizing: border-box;
object-fit: contain;
}
<div class="background">
<img src="https://picsum.photos/200/300" alt="200x300" title="200x300"/>
<img src="https://picsum.photos/50/150" alt="50x150" title="50x150"/>
<img src="https://picsum.photos/30/150" alt="30x150" title="30x150"/>
</div>
there is a flexbox with flex items
every flex item should be shown as a clickable folder with particular text in it
as far as I understand, the only way to achieve that via CSS is to have a background image
The problem is that I want to get the following as well:
Constraint every flex item, ideally only by the width, e.g. max-width: 20% (to show it nicely on mobile)
Let flex items automatically expand their width/height to show a complete background image (preserving the constraint above)
Unfortunately, was unable to find a right combination of params for that, so far it looks like this:
<div class="container">
<div class="column">
name1
</div>
<div class="column">
name2
</div>
</div>
.container {
height: 100vh;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.column {
max-width: 20%;
background-image: url("./ic-folder.png");
background-size: contain;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: space-around;
This doesn't achieve the goal - looks like every item is large enough just to cover nested <a> and they don't care about background there, so, they are smaller than desired.
I have an assumption that in this particular case we can hard-code the item's size as background image size, but that means that every time the background image is changed, we need to adjust the css with its new dimensions.
Is there any CSS way to force the element to grow in a way to cover its background image?
I think instead of adding the image in the background-image you can put it inside of the element. When you do this image will be clickable. Also if you use the style code that I wrote for the img you create a responsive image. If you want to control the image size you can play with its parent div with this way you can manage to control the width. So I suggest you give what width that you want to the .column and control your width and image problem.
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.column {
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
max-width: 20%;
/* background-image: url("https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg");
background-size: contain;
background-repeat: no-repeat; */
}
img {
max-width: 100%;
height: auto;
object-fit: contain;
}
#media screen and(max-width: 450px) {
.container {
flex-direction: column;
}
}
<div class="container">
<div class="column">
<a href="path1"
><img
src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
alt=""
/>name1</a
>
</div>
<div class="column">
<a href="path2"
><img
src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
alt=""
/>name2</a
>
</div>
</div>
I've got a calendar div (that actually has height and width set to 100vh and 100vw to be fullscreen) containing a header and an actual calendar.
I use flex because I want the header to have a specific height, and the contained calendar to take all the vertical space it has left.
rbc-calendar is actually an external library I use (React Big Calendar) which uses flex on its own to scale the rows. I've put the main div css in case it comes in relevant.
I want my calendar container to have a background image. So only for the calendar itself, not the header. I want this image to be scaled down until the height (width) fits the calendar's height (weight), keeping the image's aspect ratio and letting it overflow for the same amount on right/left (top/bottom).
Background-image: cover seems to be what I'm looking for, but for some reasons the image does not get scaled down at all.
.calendar {
height: 333px;
width: 333px;
display: flex;
flex-direction: column;
}
.calendar-header {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}
.calendar-container {
flex: 1;
background-size: cover;
background: #000 url('https://www.chenhuijing.com/slides/29-constellation-2018/img/meme1.jpg') no-repeat center center;
}
.rbc-calendar {
height: 100%;
display: flex;
align-items: stretch;
}
<div class="calendar">
<div class="calendar-header">
<h1>Not working calendar</h1>
</div>
<div class="calendar-container">
<div class="rbc-calendar">
</div>
</div>
</div>
Answer in the question's comments by Temani-afif : setting background after background-size overrides the statement.
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>
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%;
}