I'm trying to create a div that, when you scale your window, trims the picture. This works, but the image is only trimed on the right, not on the left.
How can I also trim it on the left, so that the picture stays in the middle?
My HTML:
<div class="top-foto">
<img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Coverphoto">
</div>
And my css:
.top-foto {
position: absolute;
z-index: -1;
width: 100%;
height: 315px;
overflow: hidden;
}
.top-foto > img {
margin: 0 auto;
display: block;
max-width: inherit;
}
http://jsfiddle.net/Rings/quz6a3qq/1/
Position the image absolutely as well and center it using translate
* {
margin: 0;
padding: 0;
}
.top-foto {
position: absolute;
z-index: -1;
width: 100%;
height: 315px;
overflow: hidden;
}
.top-foto > img {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
<div class="top-foto">
<img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Cover photo" />
</div>
Related
I have a single image (a checkmark) on the page and I want to fix its position when the user resizes the browser or go fullscreen.
As you can see here the image is moving around the page when I try to resize the browser:(image is the checkmark)
And when I resize the browser again:
The desired result is to fix the position of the image like that play button in the middle of the page that moves relative to the window.
Here is the CSS of the image:
Note: I need those viewport units for some complicated reason! and the absolute positioning is prefered.
#Image{
position: absolute;
max-width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Update: using this seems to work fine but the image resizes Non-proportional:
#correctImage{
position: absolute;
transform: scale(0.2, 0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
Update 2: Here is the link to download the zip files to test the code in the browser (Chrome is preferred). The HTML code to modify is in story_html5.html lines 22 - 27 and the CSS code is in correctImageStyle.css.
The desired behavior is just resizing and repositioning of the checkmark image like the play button in the center of the page.
http://s6.picofile.com/d/8381556034/1ef7bc07-eea8-4e9e-8bd8-57214a1e7ef8/Untitled1_Storyline_output.zip
Change the max-width: 10%; to width: 10%
#Image{
position: absolute;
width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Maybe you should try to force your image to always be on the middle of the screen with:
#Image{
position: fixed;
top: 50%;
left: 50%;
transform: scale(0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
This should work
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.container {
position: relative;
display: flex;
justify-content:center;
align-items:center;
width: auto;
height: auto;
}
img.image {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.logo {
height: 64px;
width: 64px;
position: absolute;
}
<div class="container">
<img class="image"/>
<img class="logo absolute" id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
</div>
With ::after
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
img {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items:center;
}
.container::after {
content: "";
background-image: url("https://round-arm-authority.000webhostapp.com/test/Changed.png");
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
position: absolute;
height: 64px;
width: 64px;
z-index: 1;
}
<div class="container">
<img class="image"/>
</div>
I have problem with how to make children size following its parent. The case below.
HTML
<div class="video">
<div class="spot">
<img src="..." alt="">
<button>x</button>
</div>
</div>
CSS
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
position: absolute;
max-height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
max-width: 100%;
/* width: 16%; only height can affect image on content*/
}
.spot img {
width: 100%;
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
What I want to do is to make the image follow the spot height. Because if I set width (whatever size), the image will follow the spot width. Anyone know how to do this?
I also create jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.
Your image is already following your .spot height. Check the border on spot. Or do you mean overflow? Or do you want your .spot to follow your .video?
console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
border: red 2px solid;
position: absolute;
height: 40%;
/*width: 20%;*/
top: 0;
left: 0;
margin: 0;
padding: 0;
max-width: 100%;
overflow: hidden;
}
.spot img {
/*width: 150%;*/
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<div class="spot">
<img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
<button>x</button>
</div>
</div>
You have set max-width instead of width. max-width will not set the width to the given value, it will just prevent the width from surpassing the given value.
.spot {
position: absolute;
height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
width: 100%;
}
I am trying to create responsive behavior with the fixed image on top and would like to achieve that the following content snapped to the bottom of the div that contains the image, but the image with position: fixed gives no height to the div, can you please point me what is wrong and if there is another way to achieve that?
.slider {
height: auto;
width: 100%;
}
.image {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
}
.content {
height: 1100px;
background-color: black;
width: 100%;
z-index: 100;
margin-top: 350px;
position: relative;
}
<div class='slider'>
<img class='image' src='http://s2.postimg.org/vmnzo6e0p/top.jpg'>
</div>
<div class='content'>
</div>
Diagram of expierience that I would like to achieve.
Maybe you're looking for something like this using JQuery: https://jsfiddle.net/9hmyr40w/
CSS:
body{
margin: 0px;
}
.slider {
height: auto;
width: 100%;
}
.image {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
}
.content {
height: 1100px;
background-color: black;
width: 100%;
z-index: 100;
position: relative;
}
JQuery:
$(window).on("load resize", function() {
var imageBottom = $(".image").height() - 15
$(".content").css("top",imageBottom)
})
The following code shows a logo and it's background. I can't get the logo centered vertically. Is it because the background div has no height defined? How can I get the background to be always 100% of the screen size with a centered logo?
body {
margin: 0;
}
#header {
min-height: 100%;
width: 100%;
position: absolute;
background-color: #CCC;
}
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
Using absolute position for image, positing to center of div using top and left and them move it back for half using transform:translate
There is code
html,body {
margin: 0;
height:100%;
}
#header {
height: 100%;
width: 100%;
position: relative;
background-color: #CCC;
}
.logo {
display: block;
position: absolute;
top:50%; left:50%; /*positing top left corner of image to center*/
transform: translate(-50%, -50%); /* move left and up for 1/2 of image */
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
There is fiddle example with position:absolute;
html, body {
margin: 0;
height: 100%;
}
#header {
min-height: 100%;
width: 100%;
position: relative;
background-color: #CCC;
}
.logo {
margin: 0 auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: 1px solid blue;
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
You can vertical center using this method inside your .logo class. But you most define your parent height for it to be effective.
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
top: 50%; /* Added Code */
transform: translateY(-50%); /* Added Code */
}
So I've seen this How do I center an image if it's wider than its container?
I have something like this
.section-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.section-background-image {
position: relative;
right:-30%;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.section-background-image img {
position: relative;
right:-30%;
min-width: 100%;
max-width: none;
min-height: 100%;
top: 0;
left: 0;
}
<div class="section-background">
<div class="section-background-image " data-stellar-ratio="0.4">
<img src="my_huge_image.png" alt="" style="opacity: 0.3;">
</div>
</div>
And I want the right portion of the image to appear if it does not fit the container, (by default its the top left hand corner portion).
With this code, it doesn't always work on the first browser request (shows top left corner portion of image), but it shows the right positioning on refreshes.
If there won't be text in the div, you can use direction: rtl;
.section-background-image {
....
direction: rtl;
}
For vertical aligning, use below css
.section-background-image img {
...
top:50%;
transform: translateY(-50%);
}
http://jsfiddle.net/afelixj/q4o08e8u/1/