I am using a plugin that allows me to create sliders. The images I upload are dynamically inserted as <img> tags into the front page layout. While I know how to render an image in its full height using CSS, I am unable to get this to work with the html image element.
This code works great if the image is served by CSS and the result is perfect.
HTML
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
background-image: url('https://i.imgur.com/Ye4Uugc.jpg');
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<div class="slider">
</div>
</div>
But the problem I have is when the image is inside HTML like this. I cannot meddle with the HTML code as the plugin inserts the image tags dynamically and I have more than 500 images inserted by the plugin.
HTML
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<div class="slider">
<img src="https://i.imgur.com/Ye4Uugc.jpg">
</div>
</div>
The result for the above code is this. Obviously overflow: hidden; clips the lower part exceeding the container height, which is not the solution I want as I need the image to fit inside the container retaining its original ratio.
Any help is appreciated.
add rules to images also to prevent overflow:
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.slider img{
max-width:100%;
max-height:100%;
height:auto;
}
<div class="container">
<div class="slider">
<img src="https://i.imgur.com/Ye4Uugc.jpg">
</div>
</div>
I'm remake code from #Ali Sheikhpour. adding width: 100%; to .slider img
.container{
width: 750px;
height: 600px;
background: rgba(222,211,210,1);
border: solid 4px #8c8c8c;
}
.slider{
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.slider img{
max-width:100%;
max-height:100%;
height:auto;
width: 100%;
}
<div class="container">
<div class="slider">
<img src="https://i.imgur.com/Ye4Uugc.jpg">
</div>
</div>
Related
I am trying to add a "strip" of an image to the left top of the div as a background with a fixed attachment property. Here it is:
https://jsfiddle.net/mvfariajr/recLr6yf/
HTML:
<div id="wrapper">
<div id="container">
<h1>TESTING</h1>
</div>
</div>
CSS:
#wrapper {
width: 100%;
height: 500px;
background-color: #ccc;
}
#container {
text-align: center;
margin: 0 auto;
width: 80%;
height: 400px;
background-color: #fff;
background-position: left top;
background-repeat: no-repeat;
background-size: 70px 100%;
background-attachment: fixed;
background-image: url(http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg);
}
The issue is that the background isn't always to the left of the div.
Any help?
Thanks!
Here you go:
#wrapper {
width: 100%;
height: 500px;
background-color: #ccc;
}
#container {
text-align: center;
margin: 0 auto;
width: 80%;
height: 400px;
background:white url("http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg") 10% 50% no-repeat;
background-size: 70px 100%;
background-attachment: fixed;
}
<div id="wrapper">
<div id="container">
<h1>TESTING</h1>
</div>
</div>
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
Currently I'm using this code:
<style type="text/css">
.icondiv{
border:1px solid;
content: url(image.png) 100% 100%;
}
</style>
<div class="icondiv"></div>
The output is like, the image stays in 1/4 of the div. How can I make the image fill the whole? I already checked the image and it has no extra whitespace.
If you don't want to use background image
.container{
width: 400px;
height: 100px;
}
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
<div class="container">
<img src="http://i62.tinypic.com/2dh8y1g.jpg" alt="" />
</div>
But pay attention to the support: http://caniuse.com/#search=object-fit
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icondiv {
width: 400px;
height: 100px;
border: 1px solid #f00;
position: relative;
}
.icondiv img {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="icondiv">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL19OsbasMqU64_o3uoov5liyKmD8KMStU1OR8hXUtV4pwALr7Sg" alt="" />
</div>
You should use
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
.container {
width: 700px;
height: 400px;
background: #444;
margin: 0 auto;
border: solid black 1px;
}
.container img{
width: 100%;
height: 100%;
}
Fiddle Here
Try this:
.icondiv{
border:1px solid;
background: url(yourimage.png) no-repeat center center;
background-size: cover;
width: 200px; // Adjust your needs
height: 200px; // Adjust your needs
}
You could create some css class like this:
full {
background-image: url(image_path('yourimage.jpg'));
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
It looks like you're trying to add the image into the div using CSS rather than inline in the HTML... I will assume you've got a good reason for this and follow suit. Instead of using "content:" you can drop the image in as a background and make it spread to fill the container.
.container {
width: 700px;
height: 400px;
background:#f00 url(http://i48.tinypic.com/wrltuc.jpg) no-repeat center center;
background-size:cover;
margin: 0 auto;
border: solid black 1px;
}
<div class="container">
</div>
The benefit of using this "background-size:cover" technique is that your image will always fill the containing div regardless of its proportions.
We want to display an image like this centred in a page: the height should be 100% of the window height, with corresponding proportional width. On either side of the image, we'd like to continue the grey brick pattern that you see at top and bottom of the image across the page on either side. The background should match the size of, and line up with, the one in the image, however big the image is.
Can anyone suggest a CSS-only way to do this?
Here's the kind of markup I've been trying so far:
<div id="container">
<img src="http://i.metro.co.uk/images/temp/visual.png" id="middle">
</div>
CSS:
#container {
height: 100%;
background: url(visual-top.png) repeat-x;
}
#middle {
outline: 1px solid red;
display: block;
height: 100%;
margin: 0 auto;
}
Here's a Codepen.
Sure you can. You might run into aliasing-problems so that your images don't line up perfectly, but in theory it's easy.
The way I would do it is using multiple backgrounds. Here is the CSS you need:
body {
background: url([screenshot.jpg]) center top no-repeat, url([tile.jpg]) center top repeat-x;
background-size: auto 100%, auto 17.5%;
}
Then you need to fiddle with the height of the tile. I came up with 17.5%, but that depends on your screenshot.
Here is a working fiddle.
<div id="brick">
</div>
<div id="mario">
</div>
css
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#brick{
position:absolute;
width: 100%;
height: 60px;
background-color:gray;
background-image: url(brick.jpg);
background-size: 100% 100%;
top:0;left:0;
z-index: -1;
}
#mario{
width: 400px;
height: 100%;
z-index: 2;
background-image:url(mario.jpg);
background-size: 100% 100%;
margin: auto;
border: 1px solid;
}
yes it can be done.
<div class="wrapper"><img src="yourimage.jpg"/></div>
the css
.wrapper{
width:100%;
height:100%;
text-align: center;
}
.wrapper img{
height:100%;
z-index:1;
}
So it will be on top of your background
html:
<div class="wrapper">
<div class="top"></div>
<img src="path/to/img.jpg"/>
</div>
and the css:
.wrapper{
text-align: center;
height: 100%;
width: 100%;
position: relative;
}
.wrapper .top{
position: absolute;
height: 80px;
left: 0px;
top: 0px;
background: url('pattern.jpg') 0 0 repeat;
width: 100%;
z-index: -1;
}
.wrapper img{
height: 100%;
width: auto;
}
<body>
<style>
.main{
width:100%;
display:table;
text-align:center;
height: "image-height";
}
.wrapper{
width:100%;
height:auto;
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div class="main">
<div class="wrapper">
<img src="image.jpg">
</div>
</div>
</body>
You can try this. This is nice article.
I've been trying to figure out if there is a pure CSS solution to ensure the image within my banner doesn't go below the height of the parent but keep ratio of the image.
You can see a demo here: http://jsfiddle.net/LkxYU/1/
html:
<div class="banner_holder">
<img src="http://placekitten.com/g/800/600"/>
</div>
css:
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
}
.banner_holder img{
width: 100%;
}
My aim is to have the image always 100%, but never below 300px in height. This would mean image cutoff, but thats fine, i just want to know if there is a pure CSS solution, or if i need to use jQuery
Instead of using an < img > tag, I made that image the background-image for a div and gave it the following styles:
.banner_holderImage{
height: 100%;
position:relative;
background: url("http://placekitten.com/g/800/600")no-repeat;
background-size: cover;
background-position: center;
}
here's the fiddle I was using: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/
Here's the complete HTML and CSS:
<div class="banner_holder">
<div class="banner_holderImage"></div>
</div>
--
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
}
.banner_holderImage{
height: 100%;
position:relative;
background: url("http://placekitten.com/g/800/600")no-repeat;
background-size: cover;
background-position: center;
}
Your image will inevitably be out of ratio depending on the screen size, why not try a background image:
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
background: url('http://placekitten.com/g/800/600') center no-repeat;
background-size: cover;
}
or you could just add a max height to your image tag:
.banner_holder img{
width: 100%;
max-height: 300px;
}
try:
.banner_holder img{
height: 100%;
/* OR */
height: inherit;
}
Use max-height and max-width to be sure that image will always fit the parent div:
.banner_holder{
width: 200px;
height: 300px;
position: relative;
outline:1px dotted red;
}
.banner_holder img{
max-width: 100%;
max-height: 100%;
}
EDIT: Sorry, I miss the part where you wrote about 300px cut-off stuff :) MathiasaurusRex's answer is correct.