I've been trying to code an email. It contains a responsive div with background image and an image button at the center of that background. I want the image button to be exactly at the center. However, the button moves away from the center when tested on different devices with different viewport width.
https://jsfiddle.net/kevinsalgatar/7x3trcu6/
div.container {
background: url(https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/6f1f0255-24a6-49a6-8a22-fc337c1d3430.png)no-repeat;
max-width: 100%;
height: auto;
position: relative;
}
div.button {
position: max-width: 100%;
height: auto;
}
div.button>img {
display: block;
max-width: 100%;
height: auto;
}
div.button>a {
-webkit-transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
<div class="container">
<div class="button">
<a href="https://www.youtube.com/watch?v=XejJw3Xgsr4">
<img src="https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/780372ac-7648-4dd4-9a29-9bfc7ca6c54c.png" alt="780372ac-7648-4dd4-9a29-9bfc7ca6c54c.png"></a>
</div>
<img src="https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/6f1f0255-24a6-49a6-8a22-fc337c1d3430.png" style="visibility: hidden;" />
</div>
div.container {
background: url(https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/6f1f0255-24a6-49a6-8a22-fc337c1d3430.png)no-repeat;
max-width: 100%;
height: auto;
position: relative;
display: inline-block;
}
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 been trying to keep the text inside the image when I resize the browser. I've tried floating it as well.
<div class="image">
<img src="background2.jpg">
<h1>Hello</h1>
</div>
And here is the CSS
.image img{
width: 90%;
display: block;
margin: auto;
position: relative;
}
h1{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
}
You want the parent element (.image) to be position: relative so that it's what the h1 will be absolutely positioned relative to. You can also give it the width and margin that center it at 90% of the page. Then make the image 100% width of the parent, and use top: 50%; left: 50%; transform: translate(-50%,-50%); to absolutely center the text vertically and horizontally.
.image {
width: 90%;
display: block;
margin: auto;
position: relative;
}
.image img {
width: 100%;
display: block;
}
.stuff {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div class="image">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="stuff">
<h1>Hello</h1>
<h2>Foobar</h2>
</div>
</div>
You can try making the image the background of the parent div:
<div class="image">
<h1>Hello</h1>
</div>
The css would look something like this:
.image {
background: url('background2.jpg') no-repeat center center;
background-size: cover;
}
This question already has answers here:
center image in a div
(3 answers)
Closed 6 years ago.
How can I ensure that the img within the container is centered and scaling correctly from mobile to desktop? Here is a demo on Codepen. Scale to mobile to better understand the problem
HTML
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
CSS
.image-container{
width: 100%;
height: 500px;
max-height: 500px;
background: red;
overflow: hidden;
text-align: center;
position: relative;
display: block;
}
img{
height: auto;
width: 100%;
max-width: 100%;
position: absolute;
top: -50%;
left: 0;
}
I ask this because the image loses it height on mobile and looks incorrect. I sort of what this to work like `background-size: cover. I'd like the image to completely fill the container
You can add margin:0 auto; to align center horizontally. Remove width:100% as this will stretch width of an image unless you want it to. Keep height:auto to adjust with width.
.image-container{
width: 100%;
height: 500px;
max-height: 500px;
background: red;
overflow: hidden;
text-align: center;
position: relative;
display: block;
}
img{
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
To center image horizontally and vertically inside div you can set top: 50% and left: 50% and then just add transform: translate(-50%, -50%).
To make image responsive you can use max-width: 100% and by default height is auto.
.image-container {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
position: relative;
}
img {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
Other option is to use Flexbox if you don't want to use relative/absolute position but to keep img responsive you can use object-fit: contain with height: 100%
.image-container {
width: 100%;
height: 500px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
object-fit: contain;
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
If you want img to behave like background-size: cover one way to that is to use object-fit: cover with height: 100% and width: 100%
body,
html {
margin: 0;
padding: 0;
}
.image-container {
width: 100%;
height: 500px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
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>
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}