I have a fixed div with the css width: 400px; height: 280px; but my image comes from various dimension, some are portrait some landscape. How do I fit/stretch/fill my image regardless of source size into the div size?
#giorgi-parunov has the simplest and best method. owever if you want to use , I suggest that you use css to make the image responsive to the div.
img {
max-width:100%;
height: auto
}
You can also use object-fit: cover
If you have fixed size on div you can just set height/width of img to 100%.
div {
width: 150px;
height: 50px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
If you want to fill div but you also want to keep image aspect ratio you can use object-fit: cover that is similar to background-size: cover when you use img as background.
div {
width: 100px;
height: 150px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
I think the best way yo do it , do it with background-image.
HTML<div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>
It is the best way to add your image to the div without Javascript.
You can check this answer to fit any image in a container centered
https://stackoverflow.com/a/36063374/2894798
In your case the code would be
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
width: 400px; /*customize to your needs 100%*/
height: 280px; /*customize to your needs*/
}
.container img
{
max-width:100%;
max-height:100%;
}
here is the fiddle
Related
I have a div container and inside of div i have a img.
<div style="background-color: red; height: 200px; width: 200px;">
<ion-img src="{{kategori[i].img}}"></ion-img>
</div>
I want to fill that div with my image. But its not fit inside. Its looks like that :
https://prnt.sc/12qcj8h
Some of them being small some of them being big. How can i fill inside of div ? I dont want see red background and i want it fill inside of div. Its my css code :
ion-img {
border-radius: 15px;
background-size: cover;
max-width: 100% !important;
max-height: 100% !important;
}
Thanks for help
ion-img {
border-radius: 15px;
object-fit: cover;
}
https://www.w3schools.com/css/css3_object-fit.asp
try this <div style="display: flex; background-color: red; height: 200px; width: 200px; object-fit: cover;">
remove object-fit:cover from image style
ion-img { border-radius: 15px; }
In this picture, I have a HTML content "div#container". It may contain a lot of things like images, forms and other HTML tags.
I want to resize this div and put it inside other container(s). The new containers may have different widht/height so I have to resize the div#container. It's a bit like to resize an image - I need to keep the width/height ratio. And I need to place the div#container in the center of the new container.
Is it to do so with pure CSS?
Thanks
Here's how you can do it using height: 100% and width: 100% on div#container and padding on div#dash-container:
.container {
background: lightgray;
position: relative;
height: 100%;
width: 100%;
}
.dash-container-1,
.dash-container-2 {
box-sizing: border-box;
border: dashed 2px;
}
.dash-container-1 {
height: 500px; /*whatever sizes you want*/
width: 300px;
padding: 100px 0;
}
.dash-container-2 {
height: 300px;
width: 500px;
padding: 0 5%; //you can use px, %, em, ...
}
<div class="dash-container-1">
<div class="container"></div>
</div>
<div class="dash-container-2">
<div class="container"></div>
</div>
Title says it all. I'm looking for a solution to make img tag fill parent (image and parent are of unknown size) while respecting aspect ratio, also without using background-size or any other workaround. I need the block with the image to have size of that picture (which background-size does not). I tried many things, like min-width and min-height, some strange things with zoom, many combinations of width/height: 100%/auto/0.
EDIT: I should have stated it in original text. I want to show whole image, not just crop a part from it. So correct result will have free space on left&right or top&bottom (this free space is not occupied by said image, only by the container).
html, body{
height: 100%;
width: 100%;
}
#container {
border: 2px solid darkblue;
height: 95%;
width: 97%;
}
#pic {
width: 100%;
height: 100%;
}
<div id="container">
<img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>
If I understand correctly, this would solve the problem.
html, body{
height: 100%;
width: 100%;
}
#container {
border: 2px solid darkblue;
height: 95%;
width: 97%;
text-align: center;
}
#pic {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>
height:auto should do the magic:
html, body{
height: 100%;
width: 100%;
}
#container {
border: 2px solid darkblue;
width: 97%;
}
#pic {
width: 100%;
max-width: max-content;
height: auto;
}
<div id="container">
<img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>
I have few thumbnail image of users and their image can be portrait or wide.
I wish the thumbnails to be in a circle without lose the aspect ratio of it.
So I created a container for each image like that:
<div class='container'>
<img src='' ... />
</div>
With this css:
.container {
border-radius: 50%;
overflow: hidden;
position: relative;
width: 50px;
height: 50px;
img {
width: inherit;
}
}
it works fine with portrait images because the image width inherit from the container.
The problem now is to adapt the same to wide images... I should replace the width with height in order to let in work as expected.
There is a better solution of mine?
Or there is a way with Less to achieve at this?
You should leave the width/height unset and set the max-width/max-height to 100%.
img {
max-width: 100%;
max-height: 100%;
}
This will only downscale images though, not upscale.
width: fit-content; height: fit-content;
.container{
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
}
.container > img{
object-fit: cover;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='http://searchengineland.com/figz/wp-content/seloads/2015/12/duckduckgo-logo-wordmark4-1920.png' alt='duck power'>
</div>
I have a fixed header that i want to keep behind the container div as I scroll down the page. as seen on http://www.madebydaryl.co.uk/. It's sorta working except the background of the content div seems to be hidden behind the background of the header. Not sure how to solve this..
My css:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}
.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}
EDIT:
This kinda worked:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;
display: table;
top:0;
left:0;
}
.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}
Except the background of the container div doesnt stretch to cover all of the content, just the height of the viewport. Any ideas?
The effect that you are talking about is known as Parallax Sliding effect,
Check it here
http://stephband.info/jparallax/
or
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307
Alas, such a simple solution.
Just put another div inside the container div, and give it the background color.
so:
<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>
and the same css except move the background to the .bg.