Scale div like an image - javascript

I am trying to scale content within a div based on it's width.
As an example, I have a div:
<div id="container"></div>
I have styling such as:
#container { margin: 0px auto; width: 810px; height: 800px; border: 1px solid #000; }
This presents me with a div 810px wide and 800px tall, nicely centered on screen with an outline.
Let's say I have a banner graphic at the top which should scale with the div, so I have it's width at 100%. Works great.
I have a background graphic for the container div itself set to scale with the width as well, working great.
What I need help with, is let's say I had a heading underneath the banner, but this font size needed to scale with everything else, based on the width of the container. How would I accomplish this?
I am also looking to add other elements such as buttons, which would need to scale.
At the end of the day, imagine and image with a width of 100%, and how it scales proportionately, perfectly. This is how I need the container div and all its children to act, like an image. I hope this makes sense.
I have looked at scaling text like in this link: http://jsfiddle.net/Aye4h/
This is the perfect behavior, but I need more than just text to scale.

Scaling is a complicated matter as some content is vector based or otherwise rendered on-demand, and some content is raster based (e.g., images). If you want to scale an entire element as if it was just an image, then have a look at transform: scale:
#scaled {
border: #f00 solid 5px;
background: #0ff;
height: 500px;
margin: -125px;
transform: scale(0.5);
width: 500px;
}
<h1>This is outside the scaled element</h1>
<div id="scaled">
<h2>Inside the scaled element</h2>
<p>An image:</p>
<p><img src="http://i.imgur.com/3A1Loxw.jpg"></p>
</div>
Keep in mind that the transform is applied after the image has been laid out on the page so all content around it will think it's still at its original size. You can work around this in many other ways, such as by using negative margin values (as I did in the example).

Related

Any ideas on how to fix image sizing without changing the original image

I have a avatar image for company logos. I want it to be round but due to sizing of the images it cuts off some of the image. I have thousands of these logos and I am looking for any Ideas on how to fix this.
The Ideal end result would be the logo centered in the circle with the least amount of overlap. I though about just adding extra background space and making the image smaller unfortunately the logos have different color backgrounds. Thanks for your time!
div {
border-radius: 50%;
width: 200px;
height: 200px;
outline: 2px dotted black;
overflow: hidden;
}
img {
height: 100%;
}
<div>
<img src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg" alt="logo">
</div>
Use object-fit: cover.
Example:
img {
width: 200px;
height: 300px;
object-fit: cover;
}
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".
The object-fit property can take one of the following values:
fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none - The image is not resized
scale-down - the image is scaled down to the smallest version of none or contain

Create an irregular border

I am trying to create an irregular border around a div, the div will contain text. I am currently using two different images and making them background on the top and bottom of the div. This method works out pretty well but the problem is the div can grow, i.e. it can have variable width and height depending on its content. So, in this case using images as background to achieve this effect is no longer viable.
Is there any way to create an irregular border using CSS and javascript? Obviously, the border should accommodate variable width and height.
I am trying to achieve something like this, but on all sides.
I'd try background-size:contain using that image and then add some padding too keep the text away. It'll scale but it might look pixelated if the box gets too large. Otherwise, you'd need to make the edges repeatable which is probably near impossible given the image you've supplied.
PS. Reminds me of the days we all wanted rounded corners and now we flat design barely uses the border-radius property.
Use a background image for the div itself and CSS border-image for the borders. Here's an example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
You can also use 2-3 divs to achieve what you are trying to do. Create an image which has the top decoration you want and set that as the background image. Then get another image with your side design, which is repeatable, but not so small that the pattern becomes apparent, and use that as the image with repeat-y enabled. Something like this
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
or
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
.image-bottom {
background: img(url3) no-repeat;
min-height: 25px;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
<div class="image-bottom">
</div>

HTML - CSS - How to left-align images in a centered and resizable parent

I have a lot of thumbnails in my page: I want them to be centered, but the last line looks awful while resizing and I have something like one or two orphan images floating in the center of the page.
The last line should be left-aligned.
How to do it?
I tried to insert another div with "margin:0 auto 0 auto;" but it doesn't work.
https://jsfiddle.net/4hw4fkm9/
What I try to have:
<div style="text-align:center;">
<img />
<img />
<img />
<img />
etc..
</div>
You should use CSS for this, not the HTML attribute "align", which is pretty old school. You can either float the images left, in which case they will stack to the left, or you could set all the images to display: inline-block, then use text-align: center on their container element (the div in this case).
Here are some references:
http://www.w3schools.com/css/css_float.asp
http://www.w3schools.com/cssref/pr_class_display.asp
I'm not sure if this is what you're looking for - as you mention that you both 'want them centered' but want them left-aligned, too.
What you can do is create another div that will act as a container, set width: 100% on the main div, set the width slightly lower on the container div and set margin: 0 auto; on the container. Then make the images relatively positioned with left:0;.
See Updated Fiddle Here. Is this what you're after?
EDIT: Re-Updated Fiddle for my attached comment. You can use set pixel values on the main and container div to account for the set pixel width of the thumbnails + any spacing that occurs.
Using the selectors in the fiddle.
.center {
text-align:center;
background-color:red;
margin:0 auto;
padding:0 20px;
}
.center:after{
content:'';
display:table;
clear:both;
}
img {
width: 100px;
height: 100px;
float:left;
}
From there the .center element would need a width of some multiple of 100px to include a fixed number of imgs. I added padding to make it look closer to the picture you provided.

Raphael canvas overrides css

I'm using Raphael to create a vector based map. The map is biggish so I'm using RaphaelZPD to allow zooming and panning while fitting the image in to a smaller frame. I've used html5 to create a div set as a table-cell with rounded corners and some inset box-shadows set in the css file. I've id'd my Raphael canvas the same as the div and while it loads nicely, shows all the graphics right, has all the animated elements working properly, stays within the boundaries etc. there's still a slight a problem. The SVG overrides the rounded corner and inset box-shadow attributes set in the css. So instead of rounded corners I get sharp corners. If I pan the map so that there is no Raphael produced graphics overlaying the corner, the rounded corner appears again. Same goes for the shadows.
So is there a way to make the js stay behind these effects? Or should I try to go around it by creating inversed rounded corners as absolute elements which stay on the top layer and just forget about the shadows?
I hope I was clear with my problem, got a good week of programming experience of any kind so bit shaky with my terminology still.
http://jsfiddle.net/cgnrh/4/ <- with practice images, also very messy
#map {
display: table-cell;
position: absolute;
margin-top: 104px;
margin-left: 350px;
border-radius: 0 2em 2em 0;
box-shadow: inset 3px 0 7px #777;
width: 550px;
height: 900px;
background: #FFFFFF;
}
var paper = Raphael('map');
I wrapped a div around your map div:
<div id="frame">
<div id="map">
</div>
</div>
Then I changed position from absolute to relative on #map and added styles for the frame:
#frame {
position: relative;
top: 104px;
left: 350px;
overflow:hidden;
border-radius: 0 2em 2em 0;
}
By applying the rounded corner to the wrapping div and hiding overflow, it creates the rounded corner on the map image. I believe you're assumption is correct that the Raphael SVG is rendering over the effects of the div on which is is painting, so you just have to constrain it with a surrounding div. Changing position from absolute to relative and using positioning on the wrapping div was necessary to get it to layout in the same place it was before. I don't think you're going to be able to achieve the inset box shadow.
http://jsfiddle.net/9w2ub/

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.

Categories