I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}
Related
I currently have a modal which i want to use as overlay over webpage.
HTML:
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="imgCon">
<img class="overlayimg" src="img/trendoverlay.png" />
<img class="overlayimg" src="img/trendtimeline.png" style="display: block"/>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
body{
width:100%;
}
.imgCon{
position: absolute;
height: 100%;
width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
.overlayimg{
max-width:100%;
max-height: 100%;
height:auto;
}
However here's the problem. The first image(top one) when only image. It's perfect. It works fine.
The image that goes underneath has to stay inside the same DIV as the other image, be as wide as the upper image. But height is fixed. Is there a way to achieve this so they still scale with the padding of 51.5px left/right and 73px at bottom?
picture with more info:
Example
Fiddle:
https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8
As you can see the top image scales how I want it to scale. That it keeps it's aspect ratio but had a minimum left/right and bottom. The image underneath the one is suppose to have the same width as the top image. But the height has to be fixed at 110px. But the Div which contains the images must keep the padding at those 2 minimum at the sides and bottom.
This is going wrong:
https://imgur.com/a/ILPpO
Here the bottom image must also scale as wide as the top image. And actually they also need to stick together so it looks like 1 image instead of 2 seperate ones.
Give this a Try
CSS
body{
position: relative;
}
.wrapper{
position: relative;
}
div.image-container{
position: absolute;
margin:auto;
height: 100%;
max-width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
img{
max-width:100%;
}
HTML
<body>
<div class="wrapper">
<div class="image-container">
<img src="http://imgur.com/c7uASdV.png">
<img src="http://imgur.com/60d6BUt.png" style="height: 110px">
</div>
</div>
</body>
Link for reference
You could give a try to display:table properties to draw a cell at middle to hold and resize first image, and absolute positionning for second image :
#modal {
display: table;
height: 100vh;
width: 100vw;
padding-bottom: 73px;/* bottom limits */
box-sizing: border-box;
}
#modal:before,
#modal:after {
content: '';
padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */
display: table-cell;
}
.modchild {
display: table-cell;
position: relative;
margin-bottom: 100px;/* room for img 2 */
width: 1%; /* will expand to fit image width and will stand at middle */
}
img[src*="x212"] {
height: 100vh;/* size it */
max-height: calc(100vh - 100px - 73px);/* downsize to use */
display: block;/* or reset vertical-align*/
}
img[src*="x100"] {/* size and stretch it */
margin: 0;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100px;
bottom: 0;
}
* {margin:0;}
<div id=modal>
<div class=modchild>
<img src="http://dummyimage.com/400x212&text=keep_ration" />
<img src="http://dummyimage.com/400x100/ff0&text=distort" />
</div>
</div>
fiddle example : https://jsfiddle.net/4n1quv9n/4/
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.
.test img{
width: 100%;
max-width: 100%;
height: 100vh;
padding: 10px;
}
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
height: 100vh;
width: 100%;
max-width: 100%;
background-size: cover;
background-position: center center;
}
<div class="test">
<img src="https://images4.alphacoders.com/432/43258.jpg" alt="">
</div>
<div class="main">
<div class="wrapper"></div>
</div>
https://jsfiddle.net/u9t4hqqq/
You can use margin, you just need to account for the vertical margin that will push your 100vh height out of 100vh, and you can do that with calc()
body {margin:0;}
div {
margin: 10px;
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: calc(100vh - 20px);
}
<div></div>
Or you can wrap the element in another element, apply padding to the outer element, and use border-box to keep the padding inside of 100vh.
body {margin:0;}
section {
height: 100vh;
box-sizing: border-box;
padding: 10px;
}
div {
background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
height: 100%;
}
<section><div></div></section>
Padding does work, but you can't see it. If you put content within the div, you'd see the effects of any padding. What you want is to apply the padding to the parent, in this case .main. Padding by definition can not impact the background of the element it's applied to but rather where children sit in relation to the element's borders.
If that is somehow insufficient, you can simulate the look with box-sizing: border-box and use a 10px border that matches the body background.
Which raises the point that you may want to review the box model to learn better what margin and padding are and how they relate to elements:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
madrougebeauty.com uses a "frame" that is layed on top of all elements; it has nothing to do with padding.
To achieve something like it, look at the following:
.wrapper {
background-image: url(https://images4.alphacoders.com/432/43258.jpg);
background-size: cover;
background-position: center center;
height: auto;
min-height: 100vh;
color: #fff;
box-sizing: border-box;
/* Give your content padding so nothing gets hidden under the frame */
padding: 2em;
}
.frame {
position: fixed;
z-index: 9999;
background-color: yellow;
}
.top, .bottom {
width: 100%;
height: 10px;
left: 0;
}
.left, .right {
width: 10px;
height: 100vh;
top: 0;
}
.top {
top: 0;
}
.right {
right: 0;
left: auto;
}
.bottom {
bottom: 0;
top: auto;
}
.left {
left: 0;
}
<!-- These 4 elements build a frame on top of the screen -->
<div class="frame top"></div>
<div class="frame right"></div>
<div class="frame bottom"></div>
<div class="frame left"></div>
<div class="wrapper">
<h1>Headline</h1>
<p>Your content here.</p>
</div>
I have an image that is bigger than its container div. When the browser/screen resizes, it should make the image bigger or smaller but always keeping the center of the image centered inside the div. One example of this is the following website: http://www.qdoba.com/ . They have their images centered as you resize the screen making it very well responsive. What I have at the moment only makes it resize horizontally but not vertically. This is what I have so far:
.swiper-container {
width: 100%;
height: 300px;
color: #fff;
text-align: center;
overflow: hidden;
}
.slide{
width:100%;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
Its pretty simple. [Jump to the end of the answer for the updated Fiddle]
HTML
<div class="slide">
<span class="Centerer"></span><div class="Centered">
<img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
CSS
*
{
margin: 0;
padding:0;
}
html, body
{
height: 100%;
}
.slide
{
text-align: center;
height: 100%;
width: 100%; /*not really needed*/
}
.Centerer
{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
width: 100%;
}
.Content img
{
max-width: 30%; /*so you can see the responsive alignment and size*/
}
If you don't set any height to the Slide, it will always have the exact height of its content, so it will look like there is no vertical alignment.
Check out this Working Fiddle
EDIT
I didn't understood you correctly.
Check out this New Fiddle
<div class="slide">
<img src='images/test.jpg' />
<div class="title">Slide 1</div>
</div>
<style>
.slide{
width:100%;
display:table-cell;
vertical-align:middle;
height: 200px; /* you have to make height static */
}
.slide img{
width:100%;
}
</style>
Ok I finally got an answer to my question. Perhaps I was not explaining it correctly but what I initially needed was to make sure the center of my image was vertically centered inside a div. The answer could not be done with just HTML and CSS but javascript needed to be implemented. so here it is CHECK OUT FIDDLE:
<style>
.swiper-container {
width:100%;
}
.slide{
width:100%;
max-height: 200px;
overflow: hidden;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
<script>
$(document).ready(function(){
var imageHeight, wrapperHeight, overlap, container = $('.slide');
function centerImage(){
imageHeight = container.find('img').height();
wrapperHeight = container.height();
overlap = (wrapperHeight - imageHeight)/2;
container.find('img').css('margin-top', overlap);
}
$(window).bind("load resize", centerImage);
});
<script>
I had a very similar problem to you, also for a responsive slider component that I was building.
My requirements:
The slider container must have a 100% width against the viewport and it must have a fixed height.
The images within the slider must stretch to the full width of the slider.
The images must maintain their aspect ratio so they are not distorted.
The images must always be vertically aligned to the middle of the slider container to create a "center crop" effect for any of the image which doesn't fit within the restricted height of the slider container.
I managed to achieve this without the use of any javascript based on principles from the following smashing magazine post: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2
Here is a generic form of my html, without any noise, to illustrate how to solve this problem:
<div class="container">
<img src="http://lorempixel.com/640/480/animals/1" />
</div>
And here is the minimal css required:
.container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 100%;
}
You can see a fiddle of this in action here: http://jsfiddle.net/8kjfasbt/
It's a very basic implementation, focusing on the problem, but you could easily take this and drop it into a slider implementation and add fancy media queries for some extra effect.
You could of course modify the CSS to give the image other dimensions, pixel or percentage, it would still center. :)
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>