This question is coming back often but even looking at some solutions, I can't get mine ...
http://jsfiddle.net/6v6cc7y5/2/
I make a slideshow (wordpress) showing en image in a div.
I want the image to be 400px large,
and vertically centered even if it is higher, I want it 200px max-height.
I call the image from a PHP while for 5 last articles and it makes impossible to use a css background-image.
Here are some solutions I found but couldn't use : (add http://)
http://jsfiddle.net/willthemoor/Cu3G5/
http:// codepen.io/anon/pen/dHvLc (<- remove added space)
Thanks a lot if you can help me !!!
stackoverflow wants some code to post ... here is a part of CSS
.jDiaporama li img{
position:absolute;
display:block;
top: 50%;
-ms-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
Related
I created a featured block with HTML5 and CSS3. This block includes a background-image and some text heading. You can see it live here: http://codepen.io/anon/pen/yNWxBb
As you can see I am now using margin-top to center the text in the vertical middle of the block. And make use of the pseudo-class ::after to add a transparant dark overlay above the background-image.
I know you can vertical align a div using table in combination with table-cell and vertical-align: middle, but than it messed my markup.
Does anyone know how to fix this? And is this the right markup to do this? Or should you recommend an other markup and manner to add the transparant background to the image?
Look out to you answer/advice.
Thank you in advance.
Two possible solutions to your problem:
http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
And yes, you might want to alter the markup in order to make this possible but both articles I'm pointing you to come with example code.
I do believe this is your solution. Just replace this class in your css and it will work fine I guess.
.features figcaption header {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
font-size: 24px;
line-height: 34px;
color: #FFF;
//position: absolute;
//top: 28%;
}
I'm designing a website using Dreamweaver and I'm having some problems with aligning the menu bar. I'm using an image designed in Photoshop and then exported over to dreamweaver. The image is to go in the center of the banner as it contains the links to the other pages of the website. I'm having difficulty center aligning this. It needs to be center aligned by the middle of the image, not by the left edge of the image. I have been using this code in CSS to do so:
position: fixed; (The menu bar needs to always be at the top, even when scrolling)
top: 0px;
left: 50%;
margin-right: -50%
transform: translate(-50%, 0%);
This has been working for Google Chrome, but on Safari it doesn't work. The image still aligns by the left margin of the picture.
Any help would be greatly appreciated.
I have also tried using margin-left: 50%; instead of transform and that doesn't seem to work.
Have you tried with the prefix?
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
I am looking for a way ONLY in CSS to adjust the height of a container <div> tag whenever one of its children have been rotated. I am very much aware (and can totally implement) a solution for this using JavaScript, but I was hoping to find a CSS solution.
This fiddle shows my quandary: http://jsfiddle.net/spryno724/yX56u/
HTML:
<div class="container">
<p>Test</p>
<img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>
CSS:
.container {
border: 1px solid red;
overflow: auto;
position: relative;
width: 100%;
}
.rotate {
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
position: absolute;
top: 160px;
}
Does anyone have any insight as to how to have the container automatically adjust its height regardless of the rotated object's natural height or rotation amount?
Personally I don't think it can be done with pure css. To calculate the height of the container you would need to do something like this:
heightContainer = sin(angleImg) * (widthImg + heightImg)
And that is something that just can't be done in pure css. You could use Javascript inside the css, or use something like Less to generate the code. But putting js inside your css is just awful (that's what you have js files for). And the Less solution would require set values for the angle and dimensions, and if those would be fixed you could just set the container height fixed as well...
Other then calculating the height, I don't see any solutions that could work. Making the img relative again won't help, since the transform won't be taken into account. And I tried playing with the answer to this related question (which is quite clever), but I don't think it can be applied to your case.
So imo: No, it can't be done with pure css But I would love to see someone prove me wrong!
I have a div which change width depending on browser width, responsive. In the div is an image which in the broadest version of my site is closest to the original image regarding width/height.
When the browser window gets smaller I want the height of the image to remain but overflow of the width to be hidden. The image should be centered in the div. Is this possible?
Full size
Mobile version
Example http://postimg.org/image/v16lb0rft/
It is possible, just use media queries. For example :
#media screen and (max-width: 640px) {
#yourImage{
overflow-x: hidden;
}
}
There is a great jQuery plugin called backstretch. Usually it's used to make full background images like here (clothing website). But it can also be used in a small div of any size.
Backstretch.js
If it's not a problem to hardcode the width of the image then this should work.
img#your-img {
margin: 0 calc(50% - (/* the width of img#your-img */ / 2));
overflow: hidden;
}
I hope this helps, good luck!
I had been trying to find a solution to this for quite some time and finally came across this:
HTML:
<div class="image-wrapper">
<img src="http://placehold.it/350x200">
</div>
CSS:
.image-wrapper {
/* Height 0, padding-bottom, and overflow hidden
give the wrapper height since it won't get a height
from it's child being positioned absolutely */
height:0;
padding-bottom:65%;
position:relative;
overflow:hidden;
width:100%; /* your dimension here (can be px or %) */
}
.image-wrapper img {
display:block;
height:100%;
left:50%;
position:absolute;
top:50%;
width:auto;
/* Negative translate instead of negative margins */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I've tested this and it works. If IE is important to you, you may be out of luck, but I hope this helps!
Here is a fiddle
Is there a way i can draw the black "background" behind the image using pure CSS ?
I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I have also tried using shadows, but the final result is not similar what i am trying to achieve.
Scope and requirements:
Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.
Before answering:
I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!
Here is a fiddle and the code below.
img {
position: absolute;
top: 100px;
left: 100px;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
img:before {
background: #000;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
width: 300px;
height: 300px;
content: ".";
}
<!doctype html>
<html>
<body>
<img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>
</html>
It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/
Added a div (sorry :-)
The problem you're having is related to how pseudo-elements work.
Before and after elements are rendered inside their parent. So:
div:before{ content:'before'; }
div:after{ content:'after'; }
renders basically like this:
<div> <span>before</span> Hello <span>after</span> </div>
You can't put other elements in img, because img is a replaced element, and therefore can't apply pseudo-elements to it. Read the spec.
So, the easiest option would be to wrap the image in an <a> (as images sometimes are) and apply your before style to the a.
Alternatively, accept the non-rotated shadow box-shadow provides.
CSS has limitations unfortunately, so you're going to have to compromise somewhere, either in design (I would argue this is the way to go) or in markup.
<style>
html (or body) {
background: url();
}
</style>
I don't know if you just want it behind the image or the entire browser. If you want it behind the image only then you will need a wrapper or at least another <div>, <span> or <img>