I have the following question. How to make image half visible with
CSS?
It should look like that:
When I'm moving the image to the right with margin-right 100% for example, there is a horizontal scroll, but how to make image split?
.logo{
opacity: 0.03;
z-index: -1;
margin-top: -70%;
margin-left: 90%;
}
You can use what you did with margin-right 100%; but you will also have to specify overflow-X: hidden; on the body or the parent container.
But there is probably a much more practical way to do it
Try use the transform property; reminde to set overflow-x: 0, on parent container.
body{
overflow-x: hidden;
}
.logo img{
z-index:-1;
position:fixed;
right:0;
top: 25vh;
transform: translatex(50%);
opacity:0.25;
}
Related
I'm building a web application in which I want a specific element to scale relative to it's parent. As far as I know, the only way to achieve this without using javascript is to use an image with the desired aspect ratio (there have been several other Stackoverflow posts about this issue), which is what I have done, so basically this:
div { height:20%; display:inline-block; }
div img { height:100%; }
This causes the div to scale the way I want, but the problem is that when the browser is resized, the width of the image changes, but the width of the div doesn't.. After refreshing the page, the element will be scaled properly again.
I've made a working example here: https://jsfiddle.net/r1efuzmb/ You can see the issue when you resize your browser or the "output" column on the Jsfiddle website.
Some notes:
The issue only occurs in Chrome and IE. In Firefox and Safari the div is scaling correctly.
I could use vh-units to set the width, but since I'm trying to scale this element relative to it's parent and not the viewport, it's not really ideal.
Does anyone know if this is a browser issue and/or if there's a way to work around this?
Thanks!
You can use padding-top on the before pseudo element to get the same effect as if you would have used an image.
div img {
height: auto;
width: 100%;
}
The image will fill the container with its proper aspect ratio.
I think that by using float and let the image-container always be 20vh could be a possible solution in your case.
html, body {
height:100%;
margin: 0;
}
.card-container {
height:20vh;
display:inline-block;
background-color:red;
position: fixed;
bottom: 0;
width: 100%;
background-color:lightgray;
}
.cards{
height: 20vh;
display: inline-block;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.cards:after{
content:"";
display:block;
clear:both;}
.cards img {
display: block;
float: left;
height:100%;
width:auto;
padding:0 2px;
}
<div class="card-container">
<div class="cards">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
</div>
</div>
I have a div that will show a picture in a bigger size.
So I want this div to be in the center of the screen. but margin 0 auto is not working...
CSS:
.form_postloader{
max-width: 1100px;
min-height: 400px;
background: #ffffff;
color: #000;
position:absolute;
margin:0 auto;
display:block;
}
http://jsfiddle.net/t5t031zj/
thank you!
it's not working because it's absolute positioned. You could remove the position absolute, or, if you need it you can do it like so:
position:absolute;
left: 50%;
transform: translate(-50%);
no need to set width, completely responsive!
http://jsfiddle.net/t5t031zj/2/
Due to position:absolute you need to use left and right to do this.
left:0;
right:0;
width: 400px;
Applying these to your box will center it, the issue is that you need to set a width.
Here is a fiddle: http://jsfiddle.net/t5t031zj/3/
I have been researching this issue for the last few days, and while have found several solutions that work well in static layouts, I am having a problem resolving in responsive design.
We have a series of banner images that we use on our home page, and are trying to get them to appear centered on the image behind text on smaller mobile screens. I can solve this for fixed widths, but we need to make this responsive.
Here is what the current rendition of my CSS code looks like:
#mainSlideshow .item img {
display: block;
width: auto !important;
max-width: none !important;
height: 350px !important;
overflow: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
#mainSlideshow .item .carouselImgHold {position: relative; }
The challenge appears to be the movement left - right now, the image just shifts to the left 50% of the img width (no surprise). How do I program the CSS to drift the image only the amount necessary to center the image in the nested div tag?
Many thanks in advance.
It would be nice if you could give us an example but lets try. :)
My suggestion is to set image as background-image instead of linking it. So that would look like:
#mainSlideshow .item{
background-image:url("path-to-image/image.jpg");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
That way you will have not stretched image covering the #mainSlideshow .item .Read more about that here
You may use text-align and negative margins if IMG stands alone on its line.
http://codepen.io/anon/pen/PPpYzM
.oversizedImage {
text-align: center;
}
.oversizedImage img {
margin: 0 -100%;
}
/* demo purpose */
.oversizedImage {
width: 50%;
margin: auto;
border: solid;
box-shadow: 0 0 150px 100px white;/* you should use overflow:hidden; here it only shows how much is outside :) */
}
.oversizedImage img {
vertical-align: top;
/* instead default baseline to avoid gap under */
position: relative;
z-index: -1;
}
<div class="oversizedImage">
<img src="http://lorempixel.com/1200/200"/>
</div>
It is only a guess since we miss your HTML
I think you can achieve this to ways.
img {
display: block;
margin-left: auto;
margin-right: auto
}
Or
img {
width: 50%
left: 50%
}
I'm looking for a way to keep a modal dialog within screen bounds, i.e. that its height is always less than the screen height and the width is adjusted accordingly. I tried:
.modal-dialog {
max-height: 100%;
}
but this doesn't seem to have any effect.
http://jsfiddle.net/ma4zn5gv/
An illustration:
I prefer a pure CSS solution (no js) if it exists. For clarity, I'm looking for max-height, not height (i.e. is the modal is no taller than screen, leave it as is).
Use viewport units with calc. Like this:
.img-responsive {
max-height: calc(100vh - 225px);
}
...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.
Also, in order to take care of the width of the modal we need to set a few more properties:
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle (Resize the viewport height to see the effect)
Alternatively:
We can replace calc with a padding + negative margin technique like so:
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
FIDDLE
PS: browser support for viewport units is very good
Target the modal-body and not the modal-dialog.
Add the following to your CSS:
max-height: 80vh;
overflow-y: auto;
It should look like this:
.modal-body {
max-height: 80vh; overflow-y: auto;
}
Adjust the VH height to preference.
Script
$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});
Fiddle
Since the default value set to auto and 100% in width and height. you just be able to modify; the image inside the viewport and the target ID, as follows:
/*let target has the same value as modal-dialog*/
#myModal {
width:auto;
height:auto;
margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
width:70%;
height:70%;
margin:0 auto;
}
Here's the DEMO in jsfiddle.
You also can separate it into, as follows:
.modal-dialog img {
width:100%;
height:100%;
margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
width:60%;
height:60%;
margin:0 auto;
}
UPDATED DEMO:
If you ensure that the parent elements have a height set, then you should be able to do it pretty easily. I have given the header and footer 10 percent heights hear and the body 80 percent so that it all adds up to 100 :)
.modal, .modal-dialog, .modal-content{
height: 100%;
}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
max-height:100%;
}
Fix the container size first, then set modal-dialog size.
For example:
.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}
Fiddle
If you provide max-height and max-width to 100% then it will take automatically accordingly screen but as you want this dialog size smaller then you will have to set max-height and max-width to some fix value.
As you have already used responsive model dialog so it will change dialog size automatically as per your screen size.
Try following css it may work as per your requirement. you can change max-height and max-width accordingly, margin-left and margin-right used for center align.
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
Hope it may help you.!!
Try working Fiddle with some css changes.
css:
.modal-dialog {
height: 100%;
margin: 0;
padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I think you should use overflow: hidden on .modal-dialog, with a style to mantain the image proportion.
html:
<div id="main">
<div id="foo">foo</div>
</div>
css:
html,body{
height: 100%;
}
#main{
height: 100%;
}
#foo{
height: auto;
/* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
height: 100%;
display: block;/* or inline-block*/
}
demo
I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.
I cannot change the markup and please if possible without touching the css for #main would be great for me.
You can center an element vertically within it's container using this technique:
#foo{
position: absolute;
top: 50%; // move down 50% of parent
transform: translateY(-50%); // move back up 50% of own height
}
Set position: relative; on the #main container to make #foo relate to it.
Demo
Try this:
#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}