This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I've been looking online for a viable solution to my problem but could not find a clear answer, so I am posting it here.
The problem is that I want to have the image cover the entire , but there seems to be some left over space below the image and I can't seem to be able to fill it up. I'm taking about the blue space in the as shown in this image:
I'm not looking for a workaround the solution. I just want a definitive solution that corrects the problem
Just add a display: block or vertical-align: top to your img tag.
img {
width: 100%;
height: auto;
display: block;
}
.cover {
background-color: blue;
}
<div class="cover">
<img src="//unsplash.it/460/345" width="460" height="345" alt="">
</div>
Try changing
img {
width: 100vw;
height: 100vh;
display:block
}
It is good if you can post a jsfiddle. so then we can looking into your actual code.
What I usually do for images is first determine if the image is landscape or portrait (i.e. if the image is wider than it is tall or vice-versa). Then I set the image's height or width to 100% depending on the orientation. And then overflow: hidden on the parent container so that the result is an image that has preserved the aspect ratio and covers the container.
Related
I published the first version of a WordPress site last week, and I am having a really difficult time figuring out the best way to have responsive images inside blog posts.
Example of a blog post with wonky images in the body.
I experimented with max-width: 100%; and width: 100%; for "img" tags, but they are still not displaying correctly, especially at smaller screen widths. I think what is throwing things off is that WordPress is adding "height" and "width" attributes to each img tag.
I'm getting pretty overwhelmed trying to find an answer to this dilemma, and I feel like other people would have had this same issue.
Here are a few things that you can do to ensure that your images always display well.
Setting max-width
It is a good practice not to exceed the original width of the image if it is not a scale-able image type.
Setting width to 100%
When you are scaling an image down and the width is set to 100%, you must free the height by setting the height property value to auto. That way, the image will scale-down without deteriorating
my-image-holder {
width: 500px; /* can be = or < the images original width */
height: 400px; /* Assuming you do not want the original height */
overflow: hidden; /* Hides vertical overlaps */
}
my-image {
width: 100%;
height: auto; /* Allows the image to scale accordingly */
}
You can use Bootstrap Class "img-responsive". Please try this code
<img class="aligncenter wp-image-167 size-large img-responsive" src="https://genofevephotography.com/wp-content/uploads/2017/12/DSC_3069-1024x683.jpg" alt="" width="640" height="427">
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have this blogspot blog: sourcewing.blogspot.com
Now if you go to drawings tab, you'll notice the electric bulb image is not aligned center of the post. What I want to say is that it is taking its original width and height. If the width would be 1200px, it would go out of the tbody (Please check the HTML of this image).
What I want is that it should shrink automatically (maintaining the proportions), according to the width of div class="post-body entry-content"... element (you'd find by inspect element). This should apply on the all images that have more width than this div.
Also, I would like to know why isn't it automatically shrinking, while the text is automatically aligned?
Remove the fixed height and width attributes from the img element.
You can then add a class eg .auto-contain or whatever with the following css:
.auto-contain {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
This will force the image to always have the same width as the container, but the height will grow in proportion.
So you are missing a few things.
height: auto;
max-width: 100%;
box-sizing: border-box;
This will achieve exactly what you are after.
Just to explain:
height: auto; - This will make sure your picture remains in proportion.
max-width: 100%; - Your image will behave responsively but wont break it's own natural sizing.
box-sizing: border-box; - Because you have padding you don't want to break the width this will keep padding but not break out of your container.
First remove the width and height attribute from your img tag.
To solve the problem :
img {
height: 90%;
width: 90%;
}
if you set height and width 100% normally your image would be as big as the parent. But in your case this does not work. 90% however looks better.
This question already has answers here:
CSS: center and scale up or down image while preserving aspect ratio
(4 answers)
Closed 7 years ago.
I am building a responsive website. On the homepage I have a number of articles whose thumbnails should be displayed at 230px * 115px at full size desktop output. The article publishers will be uploading images of all sizes with no particular set aspect ratio.
I currently just have code to resize an image based on it's parent container. the width will be 100% of it's parent container and the height is automatic and will vary depending on which aspect ratio of the original image.
.img {
width:100%;
height:auto!important;
}
Is not really cutting the mustard.
My research suggest using a background img with background-size:cover. Is this a good way to go is it possible to center the cover horzontally and vertically? And work responsively?
Abit more direction would be great there are alot of articles our there but I can't find the exact answer to my needs.
update: #LGSon That's Great thankyou. It's the best solution I have tried so far.... I like the way the image is controlled within the div. Perfect. I guess the difference is now how to control the aspect ratio of the div. if i set the width to 50% the height it still fixed.
Your <img> rule is good, but you have to pack each <img> into another container that gets a percentage-based width and height: auto;
You can do this:
CSS
div {
display: block;
overflow: hidden;
}
.img {
width: 200%;
height: auto!important;
margin: -50%;
}
HTML
<div>
<img class="img" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png">
</div>
DEMO HERE
You should set the image rule to, along with your other rules.
.img {
width:100%;
max-width:100%;
}
Will you know the dimensions of the image or are they unexpected?
The rule above is meant if you control the image and its accordance to your ratio in the design.
height is auto by default and adding !important to it does not make much of a difference.
Using a background image is a neat feature but cover will not do the job as expected. It covers the container with the images stretches or shrunk as needed to fill it entirely. Background images are also not recommended for performs reasons as they are loaded regardless of being displayed on the page or not as part of the css file, unless you load CSS files on demand with that request which is not necessary.
Hoep this helps, I will be glad to clarify.
I also disagree with the comment made about setting the parent container's height to auto as it does nothing. This is the default behaviour...
I am learning CSS and made up a problem for myself. I hope to get some help from CSS masters here :)
This is what I am trying to accomplish: A div with some text inside and a background image. Div's width is 100% of it's parent and height depends on text content. The background image should fill the div and have the minimum possible dimensions. Tried to search for answers but haven't found any.
The application of this could be for example a slider, a hero shot or a title with a responsive background and other responsive design applications.
Question
How to make responsive background image for div with constrained proportions without CSS3 "background-size" feature and without JS? The div's width is 100% and height depends on it's text content. Background image dimensions should equal either div's height or width as shown on illustration (i.e. image should have smallest possible dimensions).
Is this possible to accomplish at all? Or do I need to use some extra techniques to do this? For example extra #meadia queries with different different images (different dimension) or something else?
Illustration
Here is the illustration of how everything should behave:
Illustration
Requirements
The requirements I'm trying to achieve is No "background-size" and No JavaScript. This is for more browser compatibility. The CSS3 background-size:cover does the job almost. Very close. But it isn't compatible with older browsers. The structure is not prescribed. Text and images can be wrapped in any number of divs if needed.
Attempts
I've tried to accomplish the task with the following code:
jsfiddle
The code seems to work ok with smaller images but not with larger images. This presents one of two problems: 1) too low resolution (with small images) OR 2) it isn't clear what the image is about (for larger images).
I haven't used overflow:hidden to make the effect visible.
<div class="box">
<img class="img img11" src="image.jpg" alt="" />
<h1>Some text here</h1>
</div>
And the CSS:
* {
padding: 0px;
margin: 0px;
}
h1 { font: 600 20pt Arial; }
.box {
position: relative;
border: 1px solid black;
width: 100%;
min-height: 70px;
}
.img {
position: absolute;
top: 0px; /* Position it in top left corner */
left: 0px;
z-index: -1; /* Put it behind the text */
border: 2px dashed red;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
What are your closes't solutions? Hope the question is clear enough and isn't too long. Thanks for your replies!
I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.