I am trying to place an image on my site. But the image is crossing the div border and going out and thus making the website horizontally scrollable.
I have use the float tag in css.
here is my css code
.image-2{
width: 40%;
display: block;
float: right;
padding-right: 50px;
}
my did style sheet
.about{
display: block;
width: 100%;
height: 750px;
background-image: linear-gradient(to top right, #130178, #4F35DF, #5FD0F5);
}
How can I keep the image fixed inside the div and stop it from going out and increasing the width of the site?
Use max-height:100%; max-width:100%; object-fit: contain; for the image inside the div.
add width: 100%;to the image. then image inside parent element
Related
I want to show an image with rounded corners. So the image must stretch to the container but doesn't crop any part, like object-fit: contain. However, border-radius applies to image element, not the picture content. Here is an example (also JSFiddle):
body {
width: 100vw;
height: 100vh;
margin: 0;
}
div {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20%;
}
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
You can check how it works when you resize the viewport.
So, is there a way to make the image element resize it's borders in both directions to adjust to the container, just like object-fit does?
Or maybe a way to apply a "crop-by-rounded-rect filter" on the image content?
I've also had this problem and I've found a way to do it. If you set the height and width to auto the img element maintains its aspect ratio and the image touches the borders. You can then use max-width and max-height instead of width and height.
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 20%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You may also have to center the img on the parent div as now if it's smaller than the maximum size it will move to the top left.
After some research it seems like this is not possible in pure CSS. The answer here also confirms that.
In the other answer of this question the image view is not growing to "touch" the parent container thus leaving empty area around it in all 4 directions and staying small somewhere centered in the container. Which means it doesn't behave the same way, as the code in the question with img element taking the whole parent area and then picture content "stretched" to touch the closest borders with object-fit: contain.
Here is a solution that will fit the image when the container is smaller:
div {
display: flex;
align-items: center;
justify-content: center;
}
img {
border-radius: 16px;
max-width: 100%;
max-height: 100%;
}
If the container is bigger than the image it will just center it. Note that you probably don't wanna stretch the image at this point or it will look bad
So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
I have a div with a background-image assigned in the CSS3 file.
The image is responsive, so it scales according to the screen size BUT the container keeps the height at all screen sizes.
I need to know if there is a way to make the container responsive as well as the background image.
HTML:
<div class="responsive> </div>
CSS3:
.responsive {
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
border: 1px solid red;
background-size: contain;
width: 100%;
height: 270px;
}
I must use background-image selector and no img src tag.
Here is the fiddle file.
Thank you.
Update - February 3rd, 2021
Since I wrote the original answer a new CSS property has been introduced - 'aspect-ratio' - to solve this problem.
<div id="responsive">some text</div>
CSS:
#container {
width: 100%;
background: hotpink;
aspect-ratio: 100 / 29;
}
At the time of writing this CSS property doesn't yet have widespread browser support.
Working Example: https://jsfiddle.net/fu0nL57t/
Ref: https://web.dev/aspect-ratio/
=====================================================
Original Answer
This can be done an additional dummy element, inside the element you want to keep at a fixed ratio. If you specify a padding-top or padding-bottom as a percentage, that is in terms of the width of the container element, and this then keeps the height of the container element at a fixed ratio.
<div id="responsive">
some text
<div id="dummy"></div>
</div>
CSS:
#responsive {
display: inline-block;
position: relative;
width: 100%;
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
background-size: contain;
}
#dummy {
padding-top: 29%;
}
Working Example:
https://jsfiddle.net/098jj61q/
Credits:
http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Yes its correct. According to #Paulie_D, you can't do that with background image.As per your requirement you can do that using img tag only.
What you have to do, without using the div just make the image responsive by treating it as a block element as,
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
or if you insist to use division with background image then cover the backgound image and set min-height as,
div.mydiv {
background:url(background_image.jpg);
background-repeat:no-repeat !important;
background-size: cover !important;
background-position:center center !important;
min-height:300px;
}
When I set the background image at I have to give it a static size of div otherwise it will not display the background images. What is problem.....
I have this CSS:
.wrapper {
width: 1170px;
margin: 0 auto;
height: auto !important;
}
.main_div {
float: left;
width: 100%;
height: auto !important;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
width: 100%;
height: auto !important;
}
.header {
width: 100%;
background-image:url(file:///D|/HJ/ALL%20HTML%20TEMP/bootstrap/bootstrap/img/header_bg.jpg);
float:left;
}
The first comment is correct, I decided to create a little demo to explain this.
So if you take a look at the demo you can see we have the first div using background to place an image. This is fine and valid CSS but without a height and width how can the background be displayed?
Moving onto the second div, here we give the div with the background and height/width. Now the background has appeared. Because we have defined the height and width the background has room to display. A background cannot tell the element to be a certain size without you defining it.
And the last div, this has <img> inside of it. As this is an block element it has a height and width, so it will show the image as the parent has no height or width and therefore will allow the image to expand inside of it.
HTML:
With no height:
<div class="image"></div>With height:
<div class="imageWH"></div>With img:
<div class="imageIMG">
<img src="http://placehold.it/350x150" alt="" />
</div>
CSS:
.image {
background: url(http://placehold.it/350x150) no-repeat;
}
.imageWH {
background: url(http://placehold.it/350x150) no-repeat;
width: 350px;
height: 150px;
}
.imageIMG {
<!-- No need for anything -->
}
DEMO HERE
Why do you float the .main_div with width:100%? Floated elements get out of the flow which means they don't stretch their parent elements, so a background set on .main_div's parent won't show.
You should either remove the float or add some clearing technique to the header (also known as a css clearfix). See demonstration here: http://jsfiddle.net/YLEgY/1/
I have a div with these properties
#content {
background-image: url('img/cbg.png');
background-position: center top;
background-repeat: repeat-y;
width: 960px;
margin: auto;
padding-bottom:50px;
margin-bottom: 20px;
}
The background only shows up for 70px (I think) and then stops, then the rest of the stuff inside the div just goes on down the page like normal. If I set display:inline-block, it works correctly but uncenters my div.
If you have elements in the container which are floating, it's possible that the floats aren't properly being cleared. If this is your problem there are a bunch of work-arounds - they're called "clearfixs".
One of my favorite write-ups was here. The css they used in this example was here.
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
Well, you're doing repeat-y which means it'll only repeat vertically. If the background image is 70px, that would support the issue. Either use repeat-x or just repeat.
It wouldn't expand any longer because you have set your #content width to 960px in your browser window.
In the case of your image expanding only up to 70px, it is probably because that's the actual height of the image you've used. but mistakenly used repeat-y (repeat vertically).
Here's a simple concept in background-repeat:
If you want to repeat the image vertically, create an image that is horizontally wide.
If you want to repeat the image horizontally, create an image that is vertically tall.