I'm trying to get a responsive image slider. It musts:
Fill the height of a div
Overflow on width
Be centered
It should be similar to http://www.niraalpina.com. I'm looking for a cross-browser compatible CSS solution that doesn't involve fixed dimensions.
I've uploaded the site to http://test5.twinzebras.com/, please have a look and let me know what I'm doing wrong.
Your best bet is to use a setup like this:
HTML
<div class="container">
<div id="img1"></div>
<div id="img2"></div>
</div>
CSS
.container {
width: 100%;
height: 100%;
}
#img1 {
background: url('../img.jpg') no-repeat center center;
background-size: cover; // also give 'contain' a go
}
If cover doesn't do what you want, try contain — I'm not quite sure which you're looking for.
Note: this solution relies on having a fixed-height div around the .container: This is entirely reliant on the rest of your site's setup, so we can't do much to help you there.
You can set width and height to 100% in img
#img1 {
background: url('../img.jpg') no-repeat center center;
width: 100%;
height: 100%;
}
Related
I am trying to create a "map" with divs over cities. I got the map in .svg format and using it as background with background-size: cover. I need the "city-divs" to stay positioned relative to the image (for example London div should be always over London position on my image). I can half-achieve this making the "city divs" absolute and then positioning it using vh and vw. However, if I resize the window or check on different computer, it messes up.
I guess pure css is not the correct way on doing this. Is there a way of achieving this or am I going completely wrong direction?
Closest I got was using this solution found on stackoverflow http://jsfiddle.net/fmenrd4z/ . This works for divs in the center of image just about right. Divs more to the left / right won't work as good.
Currently, I'm using this code.
HTML
<section id="map">
<div id="london">london</div>
<div id="paris">paris</div>
</section>
CSS
#map {
background-image: url(../img/maps/map.svg);
width: 100vw;
height: 90vh;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#london {
position: absolute;
left: 31vw;
top: 35vh;
}
#paris {
position: absolute;
left: 60vw;
top: 73vh;
}
I suppose there must be solution for this problem. I've been searching the web for whole day today but didn't found anything.
I'm up for choosing completely different way of doing this. (Is there some javascript library etc..?)
Thanks in advance!
This will never work because you position the divs dimensions that are always changing depending on the screen it is displayed.
There is one of way of doing it by giving a fixed height and width of section #map in pixels for large screens and adding some media queries for mobile screens.
#map {
width: 600px;
height: 300px;
}
#media (max-width: 1024px){
#map {
width: 300px;
height: 150px;
}
}
I have added a class in react component.
CSS file:
.bg{
background: url('../img/bg.jpg');
border: 2px solid black;
}
React render method:
render() {
return (
<div>
<div className="bg">
Hey This
</div>
</div>
);
}
The browser shows the border and loads the image but image is not visible.
The screenshot is as follows:
Can anyone tell me what I am doing wrong?
This is most likely happening because div.bg does not have a height specified. Because of this, its height fits the text content exactly.
Background images of any size have no affect on the sizing of their parent element. If your goal is to be able to see the entire image, you need to specify a height for div.bg that matches the height of the original image.
Your .bg div is currently of size 0x0 px, this is why the image is not showing. Specify a width and a height to see the image.
For example:
.bg {
height: 300px;
width: 300px;
}
Or more preferably use 100% to have the entire image fit in the div.
.bg {
height: 100%;
width: 100%;
}
As a side note: make sure your background image is not too large and takes much time to load. Large background image size can lead to very bad user experience. Consider using a png image, small image with the repeat attribute, or an svg.
Try changing the background to background-image. Also give the bg class a height and a width. Then finally specify background-size to probably cover. An example would look like
.bg {
background-image: url('../img/bg.jpg');
background-size: cover;
border: 2px solid black;
height: 300px;
width: 300px;
}
This should work as I have tried it.
background-size: contain;
Not sure what the image is, but this would size the image to fit the current div height defined by the text.
Place the img folder in public folder
.css
background: url('/img/bg.jpg');
or
.js
var logo=require("../img/Logo.svg");
<img src={logo} alt="logo"/>
Have you tried switching from
background: url('/img/bg.jpg');
to
background-image: url('/img/bg.jpg');
It's very important to set height, but not in %
Example provided by Yuval is correct and worked fine.
.bg {
height: 300px;
width: 300px;
}
I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/
add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.
try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem
I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.
Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.
If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.
OK, here was my original question, where I've left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.
So far the classic trick for margin: auto doesn't work, because then width: 100% isn't the screen anymore.
#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
<div id="main" role="main">
<img src="img/bigimage.jpg" id="bigimage">
</div>
So I'm looking for an other solution. Any idea how to make max-width and horizontal centering work together?
Update:
OK, I'm almost there:
#main {
width: 100%;
text-align: center;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?
Also, a live site, with 500px max-width:
http://ilhaamproject.com/
Change your (updated) CSS to the following and it should work:
#main {
width: 100%;
text-align: center;
}
if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.
HTML:
<div id="container">
<img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
</div>
CSS:
#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}
BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.
You have the #bigimage img within the #main div. Since the main div is 1024px wide, the 100% will always be 1024. The result here is that you'll always see 1024px. If you remove the width attribute from #main or change it to 100%, you should start to see what you're looking for.
Demo
I ended up opting for display:table-row ... oh well :P