I'm setting an svg as a background image for a div (set as a table-cell, but now it's not the point). It stretches to fit the space, and that's what I wanted, and I set some padding (IN % units) to keep the text inside the image. Now the problem is that scaling the viewport or just changing the height of the div padding and image height change differently so the text positioning is scrambled. Here is the css code:
#contenuto {
border: 0px solid;
width: 79%;
display: table-cell;
font-size: 1.0em;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 5%;
padding-left: 7%;
background: url(./pic/template.svg) no-repeat;
background-size: auto 100%;
background-position:center center;
background-origin: border-box;
}
the svg file is properly set I guess:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 640" preserveAspectRatio="none">
What can I do to fix?
Related
I recently used a clip-path to do a decorative image cropping. I created a mask in Inkscape and "ripped" it out of the final svg path, and it worked, except that the mask doesn't stretch to the image size, but stays to the view-box size, since the coordinates in the path are absolute.
section {
width: 320px;
height: 320px;
border: 1px solid black;
}
#clipme {
width: 100%;
height: 100%;
background-color: #FF8864;
clip-path: path('m8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1z');
}
<section>
<div id='clipme'/>
</section>
Is it possible to fix this at the css level? Maybe there are tools that can convert absolute values to relative values? And since I mentioned inkscape, maybe I can configure it there?
Use it as mask instead. Put the path inside an SVG with the correct viewBox then load it like an image. Resize the section element to see the effect
section {
width: 320px;
height: 320px;
border: 1px solid black;
overflow: auto;
resize: both;
}
#clipme {
width: 100%;
height: 100%;
background-color: #FF8864;
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 130 130"><path d="M8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1zz"></path></svg>' ) center/contain no-repeat
}
<section>
<div id='clipme'></div>
</section>
I've got a flexbox container in which I'm trying to display two images with drop-shadows side-by-side. I want them to take equal amounts of horizontal space even though the images differ in size. I'm using a container with style "display: flex" and using "object-fit: contain" for the images to cause them to scale. My code works if I don't give the container a specific height. If I give the container a specific height, such as 300px, the images scale down, but the drop-shadow appears at a distance from the image edges as though there's a box wrapping them. This seems odd behavior. Can anyone explain this odd-seeming behavior, and is there a way in which I can give the container a height and still get it to work?
Fiddle to illustrate: https://jsfiddle.net/Lej1a6vp/
html:
<div class="container">
<img class="image" src="http://via.placeholder.com/300x400" />
<img class="image" src="http://via.placeholder.com/400x300" />
</div>
css:
.container {
display: flex;
margin: 1em auto 3em auto;
width: 500px;
height: 200px;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
height: 100%;
width: 40%;
margin-left: 1em;
object-fit: contain;
}
If you set the height to auto it will make them the same width but height will be different, if you want them to be the same height and width then you have to use an image with the same aspect-ratio for this to work since it is not possible to make it the same width and height without cropping if aspect ratios are different.
There is a #FutureCSS property called aspect-ratio: 16 / 9; in which you can lock elements to a specific ratio but it's still not available in all browsers;
.container {
display: flex;
margin: 1em auto 3em auto;
width: 500px;
height: auto;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
height: auto;
width: 50%;
margin-left: 1em;
object-fit: contain;
}
BDB88 provided me with the clue I needed, and thanks for that. My objective is to make a responsive layout that will show the drop shadow around the images and not some ghostly outline that's at a distance, and I want to keep the images' aspect ratios. I also want to mandate a particular height for the container, and not have the images overflow outside of it. My use of "height: 100%;" for the img tag was what was causing the problem. Combining that with the "width: 40%;" was causing conflict because both requirements can't always be satisfied simultaneously. By changing to "max-height: 100%;" and "max-width: 40%;" for the img tag, I'm getting the behavior that I was after. The CSS is now (I made some additional edits to make the behavior more apparent when viewing and scaling the window to simulate larger/smaller screen sizes):
.container {
background: yellow;
display: flex;
margin: 1em auto 3em auto;
width: auto;
height: 200px;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
max-width: 40%;
max-height: 100%;
margin-left: 1em;
object-fit: contain;
}
input {
border-radius: 5px;
border: none;
font: normal 13px "Trebuchet MS";
padding: 0 0 0 30px;
width: 220px;
height: 30px;
margin: 0 auto;
display: block;
background-color: #ccc;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.313 250.313" width="512" height="512" enable-background="new 0 0 250.313 250.313"><path d="M244.186 214.604l-54.379-54.378c-.289-.289-.628-.491-.93-.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.912-102.911-102.912s-102.911 46.075-102.911 102.911c0 56.835 46.074 102.911 102.91 102.911 20.895 0 40.323-6.245 56.554-16.945.269.301.47.64.759.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.275-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z" fill="#475250" fill-rule="evenodd" clip-rule="evenodd"/></svg>');
background-size: 19px;
background-position: center 10px;
background-repeat: no-repeat;
}
This code should display a input bar with the search icon to 10px from the left and centered vertically, instead it's in the center of the bar and offset vertically. When I change:
background-position: center 10px;
to:
background-position: center left;
It does what I want it to but is missing the 10px padding to the left. Any clue as to what's going on here? I just can't get this working properly.
background-position: 10px center should do it for you.
using center and left is using keywords only, which the browser somehow is able to get right because he can tell that left is not meant as a vertical unit.
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I got a little problem when trying to position my image, it does not show as i wanted, and i have been looking for at answer for a few hours. I want my picture to be shown were the arrows points:
I want this image to be at 100% width, i just cannot make it appear like I want to. The closet I can compare it to look like is the facebook cover picture (Menus at top, a big image and some small soundclouds and facebook like i already have ;) ).
And sorry for my English :s
---- My html (Sorry if its un-readable, i will copy and upload everything on request) ----
<html>
<head>
<link rel="stylesheet" id="default-css" href="default.css" type="text/css" media="all">
</head>
<div id="cover-image" class="clearfix"></div>
<footer id="site-footer">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916"></iframe>
<object height="81" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&show_comments=true&auto_play=false&color=343538&theme_color=343538&show_user=true&show_bmp=true&show_artwork=true&show_bmp=true"></param>
<param name="allowscriptaccess" value="transparent"></param>
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&show_comments=true&auto_play=false&color=343538&theme_color=34353&show_user=true&show_bmp=true&show_artwork=true&show_bmp=true"
type="application/x-shockwave-flash" width="100%"></embed>
</object>
- Control areal -
<div class="plugin_example" id="u_0_9"><div data-href="http://www.facebook.com/DjSalling"data-send="true" data-show-faces="true" data-colorscheme="dark" class="fb-like >dark_background fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml->state="rendered><span width="100%" height="61"><iframe id="f30076c07" name="f2303a14a8" scrolling="no" style="border: none; overflow: hidden; height: 61px; width: 100%;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=113869198637480&locale=da_DK&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D22%23cb%3Df20c4c7538%26origin%3Dhttp%253A%252F%252Fdevelopers.facebook.com%252Ff5cc88ac%26domain%3Ddevelopers.facebook.com%26relation%3Dparent.parent&href=http%3A%2F%2Fwww.facebook.com%2FDjSalling&node_type=link&width=450&layout=standard&colorscheme=dark&show_faces=true&send=true
&extended_social_context=false"></iframe></span></div></div>
</footer>
</body>
</html>
---- CSS ----
#cover-image {
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#site-footer { position: relative;
position: absolute: bottom;
background: url(footer-divider.png) center top no-repeat;
background-size: 100%;
margin: 0px 0 200px 0;
padding: 27px 0 0;
clear: both;
}
#inner-footer {
position: absolute;
bottom: 0;
left: 0;
}
#inner-footer .content {
color: #bcbcbc;
background: #272729;
background: rgba(0,0,0, 0.15);
background-repeat: no-repeat;
padding: 10px;
height: 72px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Thanks everyone :)
EDITS:
#3rror404 Thanks, but i what the width to be at 100% so the images scaling moves at the size of your browser and automaticly downscales from lets say 2560x1600?
#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-position: left top;
Now height is at 400xp but not even close to be able to view the whole picture
As you can see here the width works, the height just doesn't
#Kamal I used your css, but when i drag my browser window back and forth i can see the image just gets cut off, and in a narrow browser window there is a big space from the soundcloud to the picture.
I am not exactly sure that i followed your problem.. but do you mean that the image ,that you are setting as background property should scale to the width of container??
#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-size:100%;
background-position: left top;
should fit your background image width to container width.. is this what you are looking for ?
If I understand the question correctly you want background-size: cover
#cover-image {
height: 400px;
background: url(background_cover.jpg) center center;
background-size: cover;
}
This will force your background image to cover the entire container whilst maintaining aspect ratio and staying horizontally and vertically centered.
DEMO (Resize your browser)
EDIT
OK, if you don't care about maintining aspect ratio use background-size: 100% 100%
#cover-image {
height: 400px;
background: url(background_cover.jpg);
background-size: 100% 100%;
}
This will scale your background image to 100% of the height and 100% width of the container even if that means stretching or squashing the image.
DEMO