I have a div that has image on it done by uploading. It is quite working well until we uploaded diff image sizes. Problem came up when they uploaded a very big image and it is being cutoff (coz of overflow hidden) and just shows like a certain portion of the image, but if i remove the overflow: hidden, it becomes way too big. So then I put a transform(.20, .20) which worked well, but when user uploads a small sized image, it becomes really small because of the transform, which I don't like. I would like to put a min-width or like a conditional transform that if image is below 400px, don't transform it, or transform but not smaller as 400px square img. is that possible? I put min-width on several parts but nothing works.
here is my css & div:
.upload-viewer {
/*
border: 1px solid #e0246f;*/
margin-left: -199px;
height: 188px;
text-align: center;
background-color: #eee;
border: solid 1px #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 4px 5px;
transform: scale(.20, .20);
position: relative;
top: -70px;
margin-bottom: 50px;
}
<div class="upload-viewer">
<img src="" />
</div>
Min width sets the minimum width you should set the image width to 100%
Like this
.upload-viewer img{
width:100%;
}
Try using max-width
You can set a max-width prop at your img tag
For example:
.upload-viewer img {
max-width: 400px;
}
That way, it will not change your image width if it is lower than 400px, but will limit it to this width.
Related
As i understand it, in CSS the border-radius property defines how far down a side a rounded corner should start. The distance can be in relative units, such as %. However, when set in percent CSS of course take % of width on the x-axis and % of height on y. I want the element to be a bar with rounded ends:
div {
margin: 50px auto;
border: 1px solid black;
width: 800px;
height: 150px;
border-radius: 75px; /* hardcoded, but would like it to be 50% of height */
}
Pair this with an standard html doc with just a single empty div in the body. In the actual case i need this for, the height of the div is also a percentage, so i cannot just calculate it manually. How can i set the border radius to 50% of height on both axes? I couldn't seem to find this neither asked or done anywhere, so maybe there is a really obvious way of doing this that i'm just missing?
You can also use:
border-radius: 50vh;
Seems like when provided higher value of radius working for different width and height values.
div {
margin: 50px auto;
border: 1px solid black;
width: 400px;
height: 150px;
/* hardcoded, but would like it to be 50% of width */
border-radius: 50vh;
}
<div>
</div>
It's a bit of a cheat, but you can just set the border-radius to something huge and it will end up looking the same regardless of the size:
div {
border-radius: 500px;
}
This can be done using css variables or pre-processor variables(like in sass, less...), if you don't want to hardcode it
div {
--height: 150px; /* can be percentage too */
margin: 50px auto;
border: 1px solid black;
width: 800px;
height: var(--height);
border-radius: calc(var(--height) * 0.5); /* 50% of height */
}
I don't think Manjuboyz's answer's your question. The main question was setting border-radius as 50% of the container's height, not the viewport's.
vh converts to the viewport's height, not the container's height.
Look at these:
css tricks - Fun with viewport units,
mdn docs for vh
I thought I had it all working. an <img>, a div.wrapper around it (with position:relative, and an <i class="icon-edit"></i> with absolute position just beneath the right top position of the <img>. something like this:
<div class="userLogo" >
<img ng-show="user.image_url" ng-src="{{user.image_url}}" /> //data from angular, doesn't make a difference here
<div class="userEdit"><i class="icon-edit hand"></i></div>
</div>
with css (less style but you can understand):
.userLogo
{
width: 233px;
height: 233px;
img {
height:233px;
}
float: left;
//border: 1px solid #borders;
position:relative;
}
.userEdit
{
background: #bajeBack;
width: 25px;
height: 25px;
line-height: 25px;
color: #lightGreen;
position: absolute;
top: 13px;
right: 13px;
z-index: 50;
font-size: 19px;
padding: 3px 2px 2px 4px;
text-align: center;
opacity: 0.7;
.icon-edit{
}
}
and then, playing with the webapp it hit me: The image size can change! since I don't want to use a set width/height (that would distort the proportion of some images) I just set the height (to fit the design) and let the browser resize the width accordingly.
My problem; A narrow image would break the design - the edit icon would be hang in air, and not on the image at all, since it's positioned according to the userLogo.
My question: how can I do the same "absolute" positioning according to the image ? since it can't be the container. please enlight me. and don't hesitate to suggest changes to the html if needed. I'll be more the happy to learn something new!
Thanks!
If i understand you correctly, you need to constrain your image to a set space. How about using max-height and max-width.
.userLogo img {
max-height: 233px;
max-width: 233px;
}
It's pretty well supported these days: http://caniuse.com/#search=max-width
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
At the moment I have a layout that pulls a number of thumbnails into a grid - each is defined by a style that keeps them a fixed ratio, (roughly 16:9) which is defined by pixel dimensions (389px x 230px) but they are looking a bit small on high-res screens.
The images are actually pulled into the DIV as a background that covers 100% width and height of the DIV and then the DIV's obviously control the aspect and size.
What I am looking to do is have these DIV's dynamically resize based on the page size of the device but to keep the ratio of the DIV's.
Is this possible?
My thoughts would be to set the width based on the percentage of the page but then I'm not sure how I would set the height and keep the correct aspect ratio (due to different resolutions etc.)
What would be the best way to do this?
EDIT - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment.
In my HTML I've got the following code which generated the grid
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
This is styled with the following CSS
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
The reason I'm implementing it this way is so that the Div can float over the bottom of the image.
Just a quick idea which might be useful for you.
It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
http://jsfiddle.net/xExuQ/2/
body,html { height:100%; }
.fixed-ratio-resize {
width: 50%; /* child width = parent width * percent */
padding-bottom: 50%; /* child height = parent width * percent */
height: 0; /* well, it is not perfect :) */
}
If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
Reference:
http://www.w3.org/TR/CSS2/box.html#margin-properties and
http://www.w3.org/TR/CSS2/box.html#padding-properties says:
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
EDIT
http://jsfiddle.net/mszBF/6/
HTML:
<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
<span class="titles">
<span class="name">Unicomp Studios</span>
<span class="title">Springs Buckling (2012)</span>
</span>
</a>
CSS:
.griditem {
float: left;
margin-right: 17px;
margin-bottom: 17px;
min-width: 100px; /* extremely narrow blocks ==> crap looking */
width: 30%;
background: blue no-repeat;
background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
/* <a> elements must only have inline elements like img, span.
divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
display: block; /* so display those inline elements as blocks */
padding: 5px;
margin: 0 auto;
margin-top: 105%;
background: yellow;
}
.titles > span {
display: block;
}
I know this might not be the best solution, but
<html>
<style type="text/css">
#cool{
width:40%;
background:blue;
padding-bottom:10%;
}
</style>
<div id="cool" >
</div>
</html>
Here Ive used padding-bottom, to maintain its height relative to its width. U can set padding-bottom as a percentage. Hope this helped.
i have a div (which is a 200x200 square) inside which i'd like to place a 180x60 image at the top and then some text.
<div class='box_item'>
<img src="<? echo base_url(); ?>img2/avengers_assemble_small.jpg" class='box_item_img'/>
<h4>some text...</h4>
</div>
CSS is:
.box_item {
float: left;
height: 190px;
width: 190px;
overflow: hidden;
border: 1px solid grey;
padding: 5px;
margin: 5px 5px 0px 0;
}
.box_item_img{
width: 180px;
height: 60px;
margin: 5px;
}
i would expect the image to appear at the top of the box with the dimensions specified by the box_item_img class.
instead, i get a stretched image that expands to almost the entire box (a 5px margin is left at the top and on the left).
ideas?
The CSS rules you gave are working fine. There must be some other styling rules interfering, for example, a generic img rule.
Just inspect the img and div elements in FireBug or Chrome developer tools and look what rules are applied to each of them. Then try removing the most suspicious rules one by one to find the real cause.