This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
I have a problem with trying to fit an image into my div. My image is bigger than my div, so when I do the traditional
style="width:100%;"
it will resize the div, taking up more space than it should.
I've tried using
style="max-width:100%;" background-size: contain; background-size: cover;
and pretty much all the methods of resizing the image to fit an entire div.
I'm using CSS grid, and so the size of the area is how i'd like to keep the entire image to fit, but when using things like max-width it just changes the size of the area, making it bigger than what it should be
I essentially want to do something like
This example
where the image would take up the entire div and not overflow
I quickly created the following css grid which looks like your desired result to demonstrate. I have also added a couple cool tricks you can do with CSS grid.
body, html{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container{
margin: 0 auto;
width:100%;
height: 100vh;
display:grid;
grid-template-columns: 5% repeat(3, 1fr) 5%;
grid-template-rows: 5% repeat(2,1fr) 5%;
grid-gap: 1%;
}
.imageOne{
grid-row: 2/3;
grid-column: 2 / -2;
background-color:rgb(247,247,247);
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
.imageTwo{
grid-row: 3/4;
grid-column:2 / 3;
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
.imageThree{
grid-row: 3/4;
grid-column:3 / 4;
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
.imageFour{
grid-row: 3/4;
grid-column:4 / 5;
background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-position:center;
color:rgb(255,255,255);
}
<div class="container">
<div class="imageOne">
image one
</div>
<div class="imageTwo">
image two
</div>
<div class="imageThree">
image three
</div>
<div class="imageFour">
image four
</div>
</div>
Enjoy and hope it helps. Also Codepen link here
I guess this may be the solution you need.
Sample
<div>
<div class="outer">
<img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
</div>
<div class="outer">
<img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
</div>
<div class="outer">
<img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
</div>
</div>
CSS:
.outer {
width: 180px;
height: 180px;
margin: 10px;
float: left;
}
.img_size {
width: 100%;
height: 100%
}
All the depends on the style of outer div. Better enclose your image tag inside a div and provide appropriate width & height to that.
I understood your scenario you can simply use object-fit css property to achieve the result.
Example:
<html>
<head>
<title>
Image Example
</title>
</head>
<style>
.outer-div{
height:300px;
width:300px;
.outer-div img{
height:300px;
width:100%;
/* This will set the image size as cover */
object-fit: cover;
/* Give this a try too..use which ever fits your scenario.
object-fit:contain;
*/
</style>
<body>
<div class="outer-div">
<img src="path/to/image">
</div>
<body>
<html>
Related
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
So I have a 300x300 square container and an <img src="" /> image inside.
What I want is the image to cover the whole container, but keep its width/height ratio.
If the width of the image is smaller than its height (portrait), it should have 100% width and a part of the height to be cropped.
If the height is smaller than the width (landscape), it should have 100% height and the extra width to be cropped.
I can easily fit the images in the container if they're all landscape or all portrait by setting the width or height to 100% and respectively the height or width to auto:
.container {
border: 1px solid black;
margin: 30px;
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
<div class="container">
<img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="container">
<img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>
but is there any universal HTML/CSS ONLY approach to make it automatically cover the container regardless the orientation?
Note 1: The inner image should not be distorted in any way. It should only fit the container by the rules described above.
Note 2: I'm curious about an approach that doesn't imply background-image: url('')
Try this
.container {
border: 1px solid black;
margin: 30px;
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
}
img {
width: fit-content;
min-height:300px;
}
<div class="container">
<img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="container">
<img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>
I have tried what Sitaram suggested in the comments section of the question and it seems to be the optimal solution.
Besides the fact that the images would cover the entire square, they would cover the container regardless the width or height.
Snippet:
.container {
border: 1px solid black;
margin: 30px;
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
resize: both;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="container">
<img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>
I have a div width that resizes according to the browser width, right now it is set to 80%.
What I'm trying to accomplish is depending on the image size, I would like the image to take up the whole div width. If it's a small image, keep image size and center.
In my fiddle, any image width over 800px should start from the right and expand according to the div re-size. It should always touch the right side and expand with the div width.
If the image width is smaller than or equal to 500px, it should stay it's size and resize according to div but stay in middle of div only.
The problem is, I'm not sure how to only affect certain images, I would like a solution that detects the image size because the images might switch.
.parent{
border:1px solid purple;
height:100%;
width:80%;
float:Right;
}
.child{
border:1px solid red;
height:100%;
background:gray;
text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
width:100%;
background:orange;
}
img{
width:auto;
height:100%;
width:100%;
}
<div class="parent">
<div class="child">
<div class="image-wrapper">
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="https://em.wattpad.com/62f9f1c9de49ad97d7834b1e58e16a99eb2dc3c7/687474703a2f2f6170692e6e696e672e636f6d2f66696c65732f7363525a66707a54694d7a4d48484e586b7247575277674b6878726537617531666736413834472d684c484c616c7271302d6f4152524f6f525a6e55387076415a41637a545a6b4c6442476f6144496336507834395030744245426d4a646e382f50696b616368752e66756c6c2e313435323733332e6a7067?s=fit&h=360&w=360&q=80" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
</div>
</div>
</div>
Try using jQuery to detect the image's size.
$('.child-img').each(function() {
if ($(this).width() > 800) { $(this).addClass('right'); }
else if ($(this).width() < 500) {$(this).addClass('center');}
});
And the required css would be:
.child-img.right {
display: block;
max-width: 100%;
}
.child-image.center {
width: auto;
max-width: 100%;
display: inline-block'
}
.parent { text-align: center; }
I think you should be able to place the image in the background of the div and make its width and height percentage values.
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
I'm trying to embed an Youtube video inside a Div, but the video appears outside the Div.
I'm using a library called mb YTPlayer to do that.
My website demo:
I would like to put the video inside the div with red background.
My code:
CSS:
.screen{
background-image: url('img/window.png');
width: 950px;
height:390px;
margin:auto;
}
.videoprom{
padding-top:91px;
padding-left:5px;
}
.videoprom span{
display:block;
width:940px;
height:390px;
background-color:red;
}
My HTML:
<div class="screen">
<div class="videoprom">
<span class="test">
<a id="video" class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=vLUNWYt3q1w',containment:'.test',autoplay:true, mute:true, startAt:015, stopAt:110, opacity:5}"></a></span>
</div>
</div>
How can I fix that? Thanks.
Add a relative positioning to the div to fit into the container and then adjust the padding or margin.
.screen {
background-image: url("img/window.png");
height: 390px;
margin: auto;
position: relative;
width: 950px;
}
#wrapper_mbYTP_video {
margin-top: 90px;
}
Output:
Basically I'm looking to get my horizontal scrolling sites (using indexhibit) images to be relative to browser size.
At the moment using the following code it seems to resize the height but not the width?
This is my javascript that I found from this thread http://www.indexhibit.org/forum/thread/11531 which I've attached in an external js doc.
function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );
}
var sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;
});
$('#img-container').width( sum );
}
$(window).resize(function() {
resizeit();
});
$(window).load(function(){
resizeit();
});
And this is my PHP
<script type='text/javascript' src='{{baseurl}}/ndxzsite/js/images.js<last:page:version
/>'></script>
<last:page:css />
<last:page:onready />
<plugin:backgrounder />
</head>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div class="header">
<h1></div>
<div id='index'>
<div class='menu'>
<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'><p>© Lucy bower 2014</p> <p>Built by Neptik</p>
{{obj_ibot}}</div>
<last:page:append_index />
</div>
</div>
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->
</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>
And my images end up sitting in a stack like this
I just don't really understand what I'm doing wrong if it's worked for other people :( is there any other way of doing it?
Instead of sizing the img tag, I would personally recommend making the image file the background-image of the parent div ie.
<div style="background-image=url('locationofImage.png'); background-size:cover;"></div>
background-image:url(''); - Sets the background image
background-size:cover; - Set how the image should fill the div
This will simply position the image in the background of the div to ensure there is no whitespace. You then can using css set the height and width of the div to fit the space you need.
I'am not really sure if you can use it. But the whole layout can be done with CSS alone, here is an example.
Demo Here: http://jsfiddle.net/T9Zz5/1/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
overflow-y: hidden;
margin:0;
padding:0;
}
.wrap
{
overflow-x: visible;
white-space: nowrap;
height: 100%;
width: 100%;
}
.left
{
width: 200px;
float: left;
}
.item
{
display: inline-block;
width: 100%;
height: 100%;
padding: 4px;
background-color: green;
margin-left: -4px;
text-align: center;
vertical-align: top;
}
.item img
{
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.item:before
{
display: inline-block;
content:"";
vertical-align: middle;
height: inherit;
}
/* First Item width - nav width */
.left + .item
{
width: calc( 100% - 200px );
margin-left: 0px;
}
.item:nth-child(2){
background-color: yellow;
}
.item:nth-child(3){
background-color: purple;
}
HTML:
<div class="wrap">
<div class="left">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
<div class="item"><img src="http://www.placehold.it/1000x100" /></div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
</div>