What I want to do is to make a image fill it's parent element.
<div class="parent">
<img src="image.jpg">
</div>
If in my CSS I use:
img{
width: 100%;
}
It will make the image fill it's parent but just horizontally but if the image is smaller vertically it will leave a empty space. Like this:
What I really want to do is to make the image to cover the whole thing. I also don't want to use overflow: hidden, because if the image is way bigger than it's parent the image will be cut. I want to make the image to resize and cover it's parent like using background-size: cover, with the difference that this is not a CSS background but inner element.
Can someone help me please?
Thank you.
You can use some css and a wrapper element to accomplish this. The size applied to the parent is for example only and doesn't need to be there. You will need overflow:hidden though.
HTML
<div class="parent">
<div class="img-container">
<img src="http://placehold.it/200x300"/>
</div>
</div>
CSS
.parent{
width:200px;
height:300px;
overflow:hidden;
}
.img-container{
position:relative;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.img-container img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Fiddle http://jsfiddle.net/dquN6/
Adapted from http://css-tricks.com/perfect-full-page-background-image/
If you want your image to cover its parent without preserving the aspect ratio, you only need to add height:100% in the css of your image. Like this:
img {
width:100%;
height:100%;
}
Related
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
I have a small block and image width larger than the block. I want to block center equals image center.
Image center and block center must be on 1 vertical line. And i want to see only central part of image.
Instead of use negative margin on your image, you can use the transform property
.img-container{
width:100px;
overflow:hidden;
}
.img-container img{
transform: translateX(-50%);
}
https://jsfiddle.net/7gk07eLm/2/
you can do this way
html
<div class="img-container">
</div>
css:
enter code here
.img-container{
max-width: 100px;
min-height: 580px;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701);
}
I can think of two ways of doing this:
Instead of <img> tag you can use background css property with background-position set to center, and with background-size set to cover, on <div>; in your case it's going to be something like this:
.img-container {
width: 100px;
height: 500px;
background: no-repeat center /cover url("path_to_your_image");
}
Height property must be set!
If you want to stick with <img> tag it's going to look something like this:
.img-container {
width: 100px;
height: 500px;
overflow: hidden;
position: relative;
}
.img-container img {
position: absolute;
right: -1000%;
left: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
}
The crazy numbers in right, left, top and bottom positions for image are because of small size of parent <div> and big size of image itself - the percentage is based on width and height of parent block, so in this case right: 100%; will be 100px, that's why you need bigger numbers for positioning a much larger image in a smaller parent block.
Values can be tweaked, of course, as long as they are equal image will be centered.
In both cases height must be set, or it won't work!
I have a image on div. The image is dynamic added via CMS.
<div class="banner_page">
<img src="banner.jpg" />
</div>
CSS:
.banner_page{
height: 200px !important;
left: 50%;
max-width: 1920px !important;
top: 0;
position: relative;
margin-left: -993px;
width: 100% !important;
}
Once I start squeezing the browser the image exceeds the horizontal bar and I need to scooll horizontally to view the image. How can I make it responsive?
Add the CSS:
.banner_page img{
width:100%;
}
This will restrict the img width to the same as that available for the parent element, .banner_page_img
Demo Fiddle
Try using .banner_page img { width: 100%; } as then it'll fill it's parent
If you also want to constrain proportions add this :
.banner_page img{
width: 100%;
height: auto;
}
I am working for responsive site. I want to place a small image over large image. Small image should be placed exactly center of this large image. I can't take large image as background of my page. It should be inside div. How?
JSFIDDLE
//code
<div class="text-center">
<img id="draggable1" class="img-responsive" src="http://photos.foter.com/a266/freestanding-wood-and-wire-pet-gate-size-21-width-narrow-span-2658163_300x300.jpg">
<img class="heartimg" src="http://gorgeousme.co/media/19340/heart_50x42.jpg"/>
</img>
</div>
Use absolute positioning on the heart img
JSFiddle Demo
CSS
.text-center {
display: inline-block;
border:1px solid grey;
position: relative;
}
.text-center img {
display: block;
}
.text-center .heartimg {
position: absolute;
top:50%;
left:50%;
margin-top:-25px; /* half of it's height */
margin-left:-21px; /* half of it's width */
}
The <img> element cannot contain other elements inside. So you can't do something like <img><img/></img>
Nest both images under the same div and use position: absolute; and position: relative to align your image.
Here's a Kitten-based example:
HTML
<div class="text-center">
<img class="largeImage" src="http://placekitten.com/g/500/600?ext=.jpg" alt="Large kitten"/>
<img class="smallImage" src="http://placekitten.com/g/50/50?ext.jpg" alt="Tiny kitten"/>
</div>
CSS
.text-center {
display: inline-block; /* Inline block to match large image dimensions */
position: relative;
}
.smallImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* Half the image's size. */
margin-left: -25px;
}
You can use CSS position to achieve what you want.
In MDN you can retrieve information about different CSS position and its uses.
Based on your fiddle, you can add the following css class and the heart image will be on top of the other image:
.heartimg {
position: relative;
top: -55px;
left: -55px
}
Basically by positioning "relative" you can move the heart image relative to where it normally would have shown. An example fiddle with that working is here: http://jsfiddle.net/du84q/ Best of luck!
Note: As others have noted you shouldn't be nesting the "img" tag either. Browsers tend to ignore this, but it doesn't strictly do you any good.
I made an simple layout for an android application using html and css. The hole page has an background image, but i didnt declared it as:
background-image: url(
Because so belong my information i cannot center it?
So that my next plan was to make an simple div that covers the image as you can see here:
<body>
<img src="foto.jpg" class="bg">
<div class="oben">
<h1>Playing Audio</h1>
<button onclick="playAudio('test.mp3')">Play Some Audio</button>
<button onclick="playAudio('test2.mp3')">Play Some Audio2</button>
</div>
</body>
My css is the following:
.image{
position: relative;
width: 100%;
}
.oben {
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
SO now back to my actual problem, the image is not streching to the 100% of the viewport instead it is having 100% of its own width, what means around 200px! But i want to strech it all over the page! Thanks!
That's becuase there is no such thing as .image
You should try this
img.bg{
position: relative;
width: 100%;
}