So I have a div that I want to be:
100% width (of viewport) - 150px
How would I show this in CSS or Javascript?
Container of your div must be position:relative (or absolute...but not default), and div style must be like this:
position:relative;
width:auto;
margin:0px 150px 0px 0px;
You can use jQuery $(window) selector to get the viewport width and change the width of the div you want
var width = $(window).width();
$("div").css("width", width-150);
You may want to go look up the CSS style
box-sizing: border-box;
Normally, the 100% is calculated for the size of the insides, which is utterly useless if your box contains any sort of padding or border whatsoever. With box-sizing, it is calculated for the outside of the border to be that size. Incredibly useful for making % sized divs with non-zero padding and border line up properly.
Heres everything put together...
http://toomanyprojects.weare88.com/uploads/fixed-col-fluid-col/
Related
I applied a custom container to a WordPress Categories template file, set the width to 50%, floated it left, but after the third instance occurs, the layout breaks from what is expected.
I've tried changing the display types, checked for re-occurrence on other browsers(It occurs in both Chrome and Mozilla Firefox). I've also tried applying a clearfix to the container.
.clearfix::after {
content: "";
clear: both;
display: table;
}
.category .post-block {
width: 50%;
padding: 1em;
float: left;
}
https://imgur.com/a/JtdcN3L (Not enough rep for posting images directly yet)
The location of the problem observed:
https://streamershaven.blog/category/hardware/
You have to consider padding, margin and border as part of total element width.
"content-box" box model:
"Total element width = width + left padding + right padding + left border + right border + left margin + right margin"
The CSS Box Model
Solved by using the flexbox model outlined https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Have a fallback for no browser support in place.
i'm with a trouble in relation with treatment of image, using intervention image on laravel. The problem is: I have to change aspect ratio of a image, but, in my current way, i'm cropping the image to do it, and important things in this element is being cropped too. So, i was wondering, is it possible add border around on image to create the aspect ratio? If you all would can help me, i'll would be very glad with that.
P.S. Sorry for my english, i'm still learning, haha.
Solution 1
Create a div with the right aspect ratio/dimensions and load the image as a background image with background-size: contain.
div {width: 300px; max-width: 100%;}
div > div {
width: 100%;
padding-bottom: 60%; /* use this for the aspect ratio */
background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
background-size: contain;
}
<div><div></div></div>
Working demo: https://codepen.io/anon/pen/ooBaKe
How it works
The padding bottom creates the height for this div (as it has no content). The padding-bottom percentage is the percentage of the width of the parent. Thus, a 2:1 ratio image has a padding-bottom of 50%. A 3:2 ratio image has a padding-bottom of 66.66%.
Why this works
The div inside this div has a width of 100%. This is 300px, as the child div is constrained by its parent. The padding bottom percentage is relative to containing block, and not (as many people think) to the body. Here the containing block is the nearest block-level ancestor, which is the parent element. Note that it would be relative to the body if we used just one div with a fixed width of 300px.
Why this solution is not perfect
This solution is fully responsive, due to the max-width of 100% on the containing div. And if you change your mind and you want images to be cropped instead of contained, you only need to change the background-size to 'cover'. Therefore this looks like a good solution. However, a background images is not a proper image, as it has no 'alt' text and lacks a DOM representation, resulting in all kinds of accessibility problems.
Solution 2
Create a div with the right aspect ratio/dimensions and load the image as img tag with max-width and max-height.
HTML
div {
width: 300px;
max-width: 100%;
position: relative;
}
div > div {
width: 100%;
padding-bottom: 110%; /* use this for the aspect ratio */
background: black;
}
div > div > img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<div>
<img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
</div>
</div>
Working demo: https://codepen.io/anon/pen/yPgQKJ
About this solution
It works roughly in the same way as the previous one, but this solution is semantically correct. The difference here is that an image element is positioned absolute in the inner div. Its placement is absolute, but relative to its parent at 50% of the left border and 50% of the top. Then the image placement is corrected for its width and height, using the translate function of CSS (otherwise its top left corner would be in the middle of its parent). Because only max-width and max-height are used (and not width and height), the image stays responsive and keeps its aspect ratio.
How can I center my image in white space?
I am using HTML, PHP or CSS. I am not sure of the best approach, but that is what I have involved so far.
I only saw how to align an image within text on w3schools.com. My other attempts, such as:
#image {
margin-left: auto;
margin-right: auto;
}
only make the image disappear.
<img> is not block level tag (its inline level tag ) . So you have two choices in css . one is Using : display:inline-block and then giving margin : 0 auto , which is used when you are adding more than one image in a line .
second is do the same about margin but this time , use display:block; ;
I wish this could help .
The standard way to horizontally center an image (or any element) in CSS is:
img {margin:0 auto;)
This is the short version of:
img (margin:0 auto 0 auto;}
which, in turn, is shorthand for:
img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
=====
If the standard method above does not work (perhaps because of conflicting CSS elsewhere in the stylesheet?), there is an alternative way to horizontally center an image (or any element) in CSS IF you know the width of the element.
Assuming the width of the <img> is 100px:
img {position:relative; left:50%; margin-left:-50px;}
It works because:
1) with margin-left:-50px; you are telling the browser to consider the left-hand margin of the element as being exactly in the middle of the 100px-width element
2) with left:50%; you are telling the browser to position the left-hand margin of the element exactly in the middle of the element's parent
And so, of course, when you place the middle of the element in the middle of the element's parent, you have succeeded in horizontally centering the element.
=====
If you are styling for contemporary browsers, you can use the Flexible Box Layout module from CSS3:
img {display:flex; justify-content:center;}
first way
set margins to 50% on both sites
#image {
margin-left: 50%;
margin-right: 50%;
}
this should center your html-object.
second way
sometimes this doesn't work for me, so i use the deprecated tag <center>.
<center>
<img src="/img.png" alt="blubb">
</center>
< div style="margin:0 auto" >
....image...
< /div >
If you want it center of the page add width:100%
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
}
</style>
</head>
<body>
<div>The property allows to Create Chess Boxes.</div>
how to repeat the above div rounded boxes until reach max width specified or according to table width or resolution & go down to next line and until reach max-height of the screen or as specified (time-table time) so that there is no need to scroll both width wise & height wise ? help needed
You can't - PHP as a server side component has no notion of browser dimensions. You need to handle something like this client-side using JavaScript.
To get your boxes to fill the width of the browser, use float: left in your css. To dynamically add boxes until they fill the page, copy the div using element.cloneNode(true), and continue until the bottom point of the div is below the bottom point of the container.
For example, something like this: jsfiddle.net/rUUuW/1/
It's a little easier with jQuery: jsfiddle.net/rUUuW/2/
let's say that i have an image
It's size is
height : 150px width : 100px.
I want to get a part of it, let's say the full height, but with width between 30-80px. so it will be
height : 150px width : 100px.
I don't want to scale it. I want to cut a part from it. (thanks for editing, it's called cropping).
How to do it?
There is the (somewhat little-known) clip css property, although it does require that the element being clipped is position: absolute; (which is a shame):
img {
position: absolute;
clip: rect(0 100px 200px 0);
/* clip: shape(top right bottom left); NB 'rect' is the only available option */
}
Reference
jQuery cannot modify image elements like that. Your best option would be to position it within a parent element that has overflow:hidden to give the impression it is cut. Or you can use the clip CSS rule. If you actually wanted to make a new image you could use jQuery to gather coords on the image and patch those back to a server-side script to actually do the heavy-lifting and feed the new image down asynchronously.
Image editing is beyond the scope of JavaScript. You can display only a certain part of an image, but you can't actually change the image file:
<div id="imgwrapper"><img src="blah.jpg" width="100" height="150"></div>
#imgwrapper {
width: 100px;
height: 50px;
overflow: hidden;
position: relative;
}
#imgwrapper img {
position: absolute;
top: -30px;
left: 0;
}
Note that with this solution, the inner image is absolutely positioned but the outer div is relatively positioned, which may suit your page layout better than an absolutely-positioned and clipped image.
I think your best bet is to try and use a html canvas.
http://www.w3schools.com/html5/canvas_drawimage.asp
http://www.w3schools.com/html5/canvas_getimagedata.asp
Both allow for rendering parts of a source image, the getImageData() function also allows to read back the image data and manipulate it (for the whole image or parts of it).