I want to rotate a picture (90 degrees) that is between two boxes. The problem is that the picture overlaps the two boxes in this case.
Example 1: Wrong formatting
CSS:
.box{
height:50px;
width:200px;
background-color:blue;
}
HTML:
<div class='box'>Top</div>
<img style='transform: rotate(90deg);' src='https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg' width='200px'>
<div class='box'>Bottom</div>
Example 2: Desired formatting
There is a solution, but I can not use it because "image-orientation" is not recognized by all browsers (especially mobile devices):
<div class='box'>Top</div>
<img style='image-orientation: 90deg;' src='https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg' width='200px'>
<div class='box'>Bottom</div>
Is there any other solution that a rotated image does not overlap other elements? Or is there any alternative for image-orientation that works with all browsers?
If you are looking to keep the image in a relative space such as a restricted width then I would suggest the following which adds a div tag around the image, uses the before pseudo selector to create an aspect ratio based off of the boxes max with of 1:1 width & height, then absolute positioning the image within that to rotate around a center access point. See code below:
<style type="text/css">
.box{
height:50px;
width:200px;
background-color:blue;
}
.box--image {
position:relative;
max-width:200px;
outline:solid 1px red;
}
.box--image:before {
content:"";
display:block;
padding-top:100%;
}
.box--image img {
left:50%;
position:absolute;
top:50%;
transform:rotate(90deg) translate(-50%,-50%);
transform-origin:top left;
width:200px;
}
<div class="box">Top</div>
<div class="box--image"><img src="https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg" /></div>
<div class="box">Bottom</div>
Related
Let's say I have an html div (or some such element) featuring miscellaneous nested elements. I want to be able to design my layout using pixel positioning and pixel sizes (not percentages) and then scale up the resulting UI to fit the screen (while maintaining its aspect ratio).
So my question is how can I scale up an arbitrary html element and it's children while maintaining their layout?
Here's an example of a UI that I might want to scale up: http://jsfiddle.net/8dodovmn/2/
<div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;">
<div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;">
<button style="height:50px; margin-top:20px;">Submit</button>
</div>
</div>
A CSS scale transform seemed like a good idea, but it doesn't work:
http://jsfiddle.net/Lqozzpmg/1/ The layout of the elements is not preserved.
#myUI
{
-webkit-transform: scale(2); /* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */
}
Try adding a containing element so the #myUI element can be positioned in relation to it, then change your CSS a tiny bit. See fiddle here or text below
HTML
<div id="box">
<div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;">
<div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;">
<button style="height:50px; margin-top:20px;">Submit</button>
</div>
</div>
</div>
CSS CODE
#box {
width:50vw;
height:50vh;
text-align:center;
}
#myUI {
transform: translateY(-50%);
-webkit-transform:translateY(-50%);
top:50%;
transform: scale(2);
/* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */
transform-origin: 0%;
}
As you may imagine, the #box size is for demo purposes, you can use anything you want. You don't need to use viewport sizes either, I just used them just to show a not so commonly used CSS measure, but again, use what you like
Working a responsive site, so I cannot use set widths.
I need pictures to all crop to square. I cannot define the exact measurements because it also needs to have max-width:100% in order to make it a responsive image which adjusts it's sized relative to the container (which is relative to the width of the browser).
I've seen a lot of solutions that suggest using background-image but this not possible, it must be an img tag. It also must work in IE8.
Any ideas?
I currently have:
.views-field-field-photo img {
width: 100%;
height: auto;
}
<div class="field-content">
<img src="imagehere" >
</div>
using padding-bottom along with positioning and overflow:hidden you can create a responsive square container:
.field-content{
width:80%;
padding-bottom:80%;
margin:1em auto;
overflow:hidden;
position:relative;
background:#000
}
.field-content img {
position:absolute;
width:auto;
min-width:100%;
min-height:100%;
}
DEMO
jQuery DEMO center images when scaling
I tidied up some of the js allowing multiple images to be scaled and put 4 images on a simple grid
You can do something like overflow:hidden
I've made a square of 100px you can define your own size.
HTML
<div id="frame">
<img src="your image"/>
</div>
CSS
#frame{
width:100px;
height:100px;
overflow:hidden;
}
#frame img{
width:auto;
height:100%;
min-width:100px;
min-height:100px;
}
I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)
I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.
I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.
I created an illustration in case i'm not explaining well enough:
Try this http://jsfiddle.net/David_Knowles/ddh2k/
This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.
<body>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #eee;
}
#container{
margin: auto;
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
img {
width:80%;
height:auto;
display:inline-block;
vertical-align:middle;
background:#fff;
}
I'm trying to create in HTML5 a view made of div's that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.
You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.
CSS
.div {
position:absolute;
top:300px;
width:300px;
height:260px;
left:50%;
z-index:1000;
margin-left: -150px; /* negative half the width of the div */
}
.background {
background:#000;
opacity:0.5;
position:fixed:
width:100%;
height:100%;
z-index:999;
}
HTML
<div class="div">
My Content
</div>
<div class="background "></div>
this is to make the page centered with 900px width, you add this to your div element:
width:900px;margin-right:auto;margin-left:auto;
for the background, you need to add the following style to you body element
color:gray;padding:0px;margin:0px;
you have to include a width in order to center an element. margin-right:auto; margin-left:auto; will not work if you did not include a width!
I have a containing div (contentBody) that is N% wide. Within that div I have two other divs, contentLeft and contentRight.
contentLeft is always 205px. I want contentRight to automatically fill the remaining space in contentBody. How can I achieve this?
#div contentLeft{
width:205px;
float:left;
}
#div contentRight{
width:<**100% - 205px**>;
float:left;
}
Edit: Sorry, I meant to write "N%" instead of 100%, this needs to work for a containing area of any percentage or size.
The following should do it:
#contentBody{
width:N%
}
#div contentLeft{
width:205px;
float:left;
}
#div contentRight{
margin-left:205px;
}
the easiest thing to do is to position them both absolutely then set contentleft to the desired with and add margin-left equal to that same width - as follows:
#div contentLeft{
position:absolute;
top:0;
left:0;
width:205px;
}
#div contentRight{
position:absolute;
width:100%;
top:0;
left:0;
margin-left:205px;
}
You can put float left and width only for contentLeft
.contentLeft{
width:205px;
float:left;
border:1px solid red;
}
.contentRight{
border:1px solid red;
}
The correct way is to use CSS display:table on the wrapper and display:table-cell on the columns. This keeps your semantics correct but gives you all the benefits of tables including cells stretching to fill remaining space.
As is typical IE doesn't support this valuable CSS property so you might want to consider using a real table until it does (or perform some hacks with JS or conditional comments).
<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell;}
</style>
<div class="table" style="width:100%">
<div class="tr">
<div class="td" style="width:205px"><!-- left --></div>
<div class="td"><!-- right, stretch to fit --></div>
</div>
</div>
<!--[if ie]>
<script>
// pseudocode, IE6 doesn't support document.getElementsByClassName()
// http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
for (node in getElementsByClassName('table')) {node.tagName = 'table';};
for (node in getElementsByClassName('tr')) {node.tagName = 'tr';};
for (node in getElementsByClassName('td')) {node.tagName = 'td';};
</script>
<![endif]-->