I'm looking to overlay an image of some content on top of an iPhone, that can scale responsively and fit/remain within the screen area of the device. I haven't been able to find a good tutorial on how I could accomplish this effect. Here is what I've tried so far...
http://jsfiddle.net/mcasavant/VLBAE/1/
<div class="large-5 columns">
<img src="http://www.ikonet.com/en/visuelmobile/images/iphone4.png" alt="" />
<img class="inner" src="http://old.mobilecrunch.com/wp-content/uploads/2010/01/iphone-4-os.jpg" alt="" />
.large-5 {
width: 80%;
position: relative;
}
img {
max-width: 100%;
}
.columns:first-child {
float: left;
}
.inner {
position: absolute;
top: 17%;
left: 1.3%;
padding: 0 12%;
max-width: 76%;
}
.columns {
padding-left: 15px;
padding-right: 15px;
}
However it scales weirdly, and kind of juts out on the left a little. Certainly not very appealing. Ideas?
May I suggest placing the wrapping image as background of the content image instead?
It might need some tweaking but I think it does the job.
http://jsfiddle.net/xC446/7/
<div class="wrapper">
<img src="http://old.mobilecrunch.com/wp-content/uploads/2010/01/iphone-4-os.jpg" alt="" />
</div>
.wrapper { width:200px}
img {
background-image : url('http://www.ikonet.com/en/visuelmobile/images/iphone4.png');
background-repeat : no-repeat;
background-size : 100% 100%;
width : 100%;
height : auto;
padding : 35.5% 7% 46% 8%;
box-sizing :border-box;
-moz-box-sizing:border-box;
}
Related
How to crop the top of an image has already been described in this question. However, I am trying to crop an image by a percentage when the image dimensions are not known ahead of time. The container's resulting height should then be dependent on the size of the image.
Using the following, I can crop the top of an image, but it requires manually specifying the amount of the image to show in pixels. Is there a way I can specify I want to crop the top 10% of the image without knowing the image size ahead of time?
.container {
overflow: hidden;
position: relative;
height: 370px;
}
.container img {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
Here is an idea that rely on scale. You keep the image in-flow (don't use position:absolute) then you scale the container by 0.9 which is 90% of the total height then you scale the image by 1.1 to keep it's original size. This will trim the image by 10% but since transform is only a visual effect you may have space at the top or the bottom of the container (based on the transform-origin)
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(1.1);
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
To be more precise we can consider calc() like below:
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(calc(1/0.9));
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
I think the best approach to this without Javascript would be to translate the image up a certain percent, then scale it to fill the original height of the container. Anything else will leave a gap at the bottom.
.img_container img {
transform: translateY(-50%) scale(2);
}
https://jsfiddle.net/amoliski/n4ojdzyr/
This should do the trick, using translateY (got that from How can I get the height of an element using css only)
As you can see, the .container does not have a hardcoded height, however, it will load with the original image height, which is 500px, even though the image is loading as 450px (500px - 10%)
.container {
overflow: hidden;
position: relative;
}
.container img {
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(-10%);
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
You can do this with a little bit of JavaScript (I've inlined it for simplicity's sake but you could move it to it's own function)
<div class="container">
<img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>
Here's a working JSfiddle.
An alternative would be to use the top CSS property in a negative fashion on a relative image like the snippet below. This works for an image of an arbitary width and height. Just adjust your top value, accordingly.
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display:flex;
margin-bottom: -10%;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -10%;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
To remove the extra bottom margin, just subtract the margin-bottom equal to the amount you subtracted from the top. Here it is margin-bottom: -10%;
Adjust the top value according to your dynamic images. Also note, I added height:100% to your container so you can see the full image but the top part is cropped. I used flex for centering. Test for another image but this time, it is cropped 50% from the top
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -50%;
display:flex;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -50%;
right: 0;
}
<div class="container">
<img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>
Trying to get a CSS only solution for the following problem.
I would like to display a variety of sized images within a container. If the image is larger then 80% viewport height, it should be scaled down to fit within the container.
Problem I am having is scaling to both a max-height and max-width (in order to accommodate both landscape and portrait images).
Here is a non-working JSFiddle as a starting point. None of the images should flow outside of the gray box.
https://jsfiddle.net/0h5zkk0z/2/
<div id="container">
<img src="http://dummyimage.com/200x200/000/fff/?text=small" />
</div>
<div id="container">
<img src="http://dummyimage.com/400x700/000/fff/?text=portrait" />
</div>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff/?text=landscape" />
</div>
<style>
#container {
max-height: 80vh;
background-color: #ccc;
position: relative;
margin-bottom: 30px;
}
#container IMG {
margin: 0 auto;
display: block;
width: auto;
height: 100%;
}
</style>
.container {
max-height: 80vh;
background-color: #ccc;
position: relative;
margin-bottom: 30px;
}
.container img {
margin: 0 auto;
display: block;
width: auto;
max-height: inherit; //Inherits from container height
}
Btw: Please use an ID only once :-)
Fiddle
how to add the black bars on my div with 400x400 div size.
if the picture is portrait, it would add black bars on left and right,
and when the picture is widescreen the black bars will be added on top and bottom.
<div>
<img src="image.png" class="img-responsive" />
</div>
I have no sleep for almost 2 days because of this.
I don't understand on this.
this is the sample picture:
please help me
EDIT1:
hello, can you check my html... it should be perfect align, but the picture have different size the alignment broken... look at this.. http://codepen.io/anon/pen/MaorKq
EDIT2
It's already but when the width higher the image pass through
check here: http://codepen.io/anon/pen/EVXMee
Is this what you're looking for?
I've made a pure CSS solution that should work up to IE8. :)
Also, it should work with any width/height.
.image-background {
background: #000;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.image-container {
display: table-cell;
vertical-align: middle;
text-align: center;
margin: auto;
max-height: 100%;
max-width: 100%;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
margin: auto;
}
http://codepen.io/anon/pen/vNZJwe
Good luck!
Your div is 400*400, but your image is small, When you have used img-responsive that means img max-size : 100 %. But here you want to see min-size:100%.
You can try below code
<img src="image.png" class="img-responsive full-width" /> <!--add class full-width-->
in your css file
.full-width{
width:100%;
}
Use below CSS,JS and HTML markup to achive this:
<style>
.img-container {
width: 400px;
height: 400px;
background-color: black;
position:relative;
}
.img-container img {
position:absolute;
top: 50%;
left: 50%;
}
</style>
<script>
$(document).ready(function() {
debugger;
var img = $('.img-container img');
img.css('margin-top', - ($('.img-container img').height() / 2) + 'px');
img.css('margin-left', - ($('.img-container img').width() / 2) + 'px');
});
</script>
<div class="img-container">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" class="img-responsive" />
</div>
Here is a stripped-down version of what #Himechi90 wrote.
If you only need one image instead of a row, basically all you need is:
.image-full-view {
float: none;
padding: 0;
background: #000;
display: table;
width: 100%;
height: 100%;
}
.image-full-view img {
display: block;
max-height: 80vh;
max-width: 100%;
margin: auto;
}
<div class="image-full-view">
<img src="https://media.usfcvast.org/images/cvast-arches/projects/la_mancha/la_motilla_del_azuer/la_motilla_del_azuer_aerial.jpg" alt="" />
</div>
You can use object-fit: contain;
css:
.image-container {
overflow: hidden;
height: 16rem;
background-color: black;
width: auto;
}
.image-item {
object-fit: contain;
height: 100%;
width: 100%;
}
html:
<div class="image-container">
<img class="image-item" src="images/Screenshot(1).jpg">
</div>
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.
I am constructing a website based off the 1140 CSS Grid, which is an entirely fluid grid set to a max-width of 1140px. I have laid what is going to become a nav bar over this layer that extends five pixels further on each side (for everyone's favorite 'ribbon' design effect) and would like the middle 1140px (of the now 1150px nav) to be adjust width along with the grid below it. Everything I have tried thus far, however, has not worked. Anyone have any ideas?
HTML:
<div class="float">
<div class="nav">
<div class="navleft">
<img src="images/banneredgel.png"/>
</div>
<div class="navbar">
</div>
<div class="navright">
<img src="images/banneredger.png"/>
</div>
</div>
</div>
CSS:
.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}
.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.navleft {
float: left;
width: 5px;
height: 43px;
}
.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}
.navright {
float: left;
width: 5px;
height: 43px;
}
I created a JS fiddle with your answer. http://jsfiddle.net/thinkingsites/Vz4TC/3/
Your problem is that the width 100% doesn't allow for the two bits on the side, so when your page shrinks it wraps the children of .nav
What I did was position them absolutely in .nav and gave .navbar a left and right margin to allow for the ribbons WITHOUT setting it to width:100% as that would push the ribbons away. I've also set the max width of .nav to 800 and the nav never expands beyond that.
I was able to take the code Thinking Sites offered and altered it a number of lines more in order to get something that hovers over the center while the width is less than the browser (ribbons on the edges) and then turns into a bar when the site fluidly adjusts to a smaller browser width.
HTML:
<div class="float">
<div class="navleft">
<img src="images/banneredgel.png">
</div>
<div class="navbar">
<img src="images/logo.png" class="logo"/>
</div>
<div class="navright">
<img src="images/banneredger.png">
</div>
</div>
CSS:
.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}
.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}
.navright,.navleft {
width: 5px;
height: 43px;
position: absolute;
top: 0px;
}
.navleft{
left: -5px;
}
.navright{
right: -5px;
}