What I want:
I have a PNG image of a shirt which has an clear background, and I want to place it on top of a colored square, such that the shirt in the image will "pop" over the edges of the square, for decorative purposes.
The width of the image is set to 100%, and the height is set automaticaly to keep the original ratio. If the window is resized, the squares height and width should be relative to the images height and width, and should resize responsively alongside the image.
What I've tried:
What is using a div for the decorative square, and a img html element for the image, and placing them both in a container:
This is the CSS for the square:
.square {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
background-color: red;
z-index: -1;
}
CSS for the image:
.shirtImage {
width: 100%;
margin-left: auto;
margin-right: auto;
}
And the container is simply a div.
The Problem:
The height of 80% set for the square is relative to the the whole page, all the way to the bottom, instead of just the div wrapping the image and the square.
I realize that this method is bound not to work since i'm expecting the square to infer its height from the parent (the wrapping div) which infers its height from another child (the image), but can't quite understand entirely why it isn't working, and can't figure out how to do it.
you need to use a pseudo, so the div becomes the parent , and from there use vertical padding or margin to sretch the div into a square. Image can be layed in absolute to avoid modifying height of the div.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
<percentage>
The size of the padding as a percentage, relative to the width of the containing block.
possible example
.square {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
background-color: red;
z-index: -1;
position: relative;
overflow: hidden;
}
.square:before {
content: '';
display: block;
padding-top: 100%;/* equals width of parent */
}
.shirtImage {
width: 95%;/* 95 instead 100 for the demo*/
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
}
<div class="square">
<img class="shirtImage" src="http://dummyimage.com/100/fe0">
</div>
Related
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
Lets say I have a div of heigh 400px and width 400px.
<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>
Now if I have a image of height 350 and width 200 px I want it to be adjusted in this div. I mean it adjust inside the div being child to the div. It should not fit to the div neither stretch. Just fit in the center.
Like div should be taken as 100% and image should be in its ratio.
Remaining 50 px in height and 200 px in width should be left. like buttom and top leaving 25 25 px and left and right leaving 100 100 px.
Also if the image is of say width 800px and height 700 px same way the div height and width should be considered as 100 percent and the image should lie in the middle without any stretch
I am not a front end developer :(
So you want the image to be centered inside the div, in its original size, and any overflow simply cut of when the image is larger than the div in any dimension?
Well you could just set it as a centered background-image, instead of using in actual img element.
If that’s not an option, position it absolutely – -50% from either “side” (top, left, right and bottom), and use margin:auto to center it:
div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
bottom:-50%; margin:auto; }
<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>
You can achieve this using transform property of css.
Here is the fiddle
div {
position: relative;
}
img {
display: block;
margin:0 auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note, I cleaned up the inline styles, just to make it clear.
http://jsfiddle.net/s4ja2q1z/4/
div {
width: 400px;
height: 400px;
background: lime;
text-align: center;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
EDIT: Added fixes if the image is taller than the container.
Try putting max-width and max-height on the image:
<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />
This will keep the image dimensions limited to a maximum width and height of the parent container (aka 400px in this case) and it will scale down if you ever change your parent div's dimensions without changing any ratios that would cause stretching.
You can do it this way too by using the table-cell property.
http://codepen.io/Edrees21/pen/XJoEmp
<div class="container">
<img src="http://placehold.it/350x200/aEEAEE" />
</div>
.container {
width: 400px;
height: 400px;
text-align: center;
background-color: #cccccc;
vertical-align: middle;
display: table-cell;
}
I would set the image as a background of your div and then change the size of it using background-size: contain.
This will make your image not be distorted, but still fill the entire div.
<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;">
</div>
div {
text-align: center;
}
img {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}
I'm not too sure if this can be achieved in pure CSS, though it would be preferable. I have an image:
<img src="#" class="article-thumb">
CSS:
.article-thumb {
height: 55%;
}
So, how can I make the width to equal whatever the height is? I'm trying to achieve an image that's a perfect circle (so I obviously have some border-radius applied), and that can also scale to fill as much as it's container (actually to fill 55% of it's container in height to be specific)
Here is one way of doing it which involves some extra mark-up so it may not appeal to everyone.
Let .wrap be some parent, containing block with some width and height (can be in % values).
Define an inline-block child container, .framer, whose width is a % of the parent, for example, 23%.
Within .framer, place a square image .aspect-setter (dimensions not critical, just keep it small) and set the width to 100%. The image will then scale to the width of .framer and .framer will shrink-to-fit the image (because it is an inline-block) and keep its intrinsic shape (because height is auto). Use visibility: hidden to hide the image while keeping it in the content flow.
Define .avatar-container as an absolutely positioned element and use the offsets to scale it to fit .framer. Since .framer is square, .avatar-container will also be square.
Using an extra image is not overly elegant, but it gets the job done.
.wrap {
width: 400px;
height: 250px;
border: 1px dotted gray;
}
.framer {
display: inline-block;
position: relative;
border: 1px dashed blue;
width: 23%;
}
.aspect-setter {
vertical-align: top;
visibility: hidden;
width: 100%;
height: auto;
}
.avatar-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-image: url('http://www.wisportsfan.com/siteresources/images/defaultavatar.jpg');
background-size: cover;
}
<div class="wrap">
<div class="framer">
<img class="aspect-setter" src="http://placehold.it/100x100">
<div class="avatar-container"></div>
</div>
</div>
I have a div which contains an image
<div class="logo-wrapper">
<img src="img/logo.jpg">
</div>
and following CSS:
.logo-wrapper {
width: 197px;
height: 78px;
position: relative;
}
img {
bottom: 0;
display: block;
height: 100%; /* this */
width: 100%; /* or this, depending on image ratio */
margin: auto;
position: absolute;
top: 0
}
The image inside .logo-wrapper is generated dynamically and each has a different ratio. What I intend to do, is to fill the img whether in the height or width of its parent depending on the dimensions of the image. I could do that with an background image instead, but I don't want to have trouble with old IE's. So does anyone have a solution that the img takes whether height or width, depending on its ratio?
If the image is bigger than .logo-wrapper, you can use
img {
max-height: 100%;
max-width: 100%;
}
If not, it won't grow, but this way you won't have a blurred image.
I am trying to position an div element at the bottom right of an image, that is inside a container element. I set position relative to the container, and position absolute to the inner div, but it does not work. Here is the (http://jsfiddle.net/ZC84G/). Please, help.
<div class="container">
<div class="icon"></div>
<img src="/images/someImage.png" />
</div>
CSS:
body {
background-color: black;
}
.container {
position: relative;
}
.container img {
max-width: 75%;
max-height: 80%;
}
.icon{
background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
width: 31px;
height: 31px;
position: absolute;
bottom: 5px;
right: 5px;
}
This is because by default div has block display mode, and it's width is 100% of the parent container. Try to add display: inline to .container
.container {
position: relative;
display: inline;
}
Here's the corrected jsfiddle: http://jsfiddle.net/ZC84G/4/
Your container div has no width and height set. And since a <div> is a block-level element by default, it will be set to 100% width ie expand to however much horizontal space is left.
Plus, you're also constraining your image size:
max-width: 75%;
max-height: 80%;
If you replace the img CSS with:
max-width: 75%;
max-height: 80%;
It works fine, and as expected: http://jsfiddle.net/ZC84G/3/
I've modified your CSS on the image a bit.
Basically, I set it to scale properly to the size of its container, and now it sits where I think you wanted it. The way you could find this yourself in the future would be to inspect the element by using right click from your browser, and looking at the size of the different elements to see what was expanding larger/smaller than it should.
.container img {
max-width: 100%;
height: auto;
}