I am working on mobile site and have a problem with image banner.
Example for tablet:
But when i open website on mobile, it want to be like this:
Here's my code so far
<div class="col-xs-12 topbar">
<div class="row">
<img src="img/bg.png" class="img-responsive" />
</div>
</div>
The height should be fixed to 450px;
How can I achieve this for mobile
The problem is your height. If you remove the explicit height declaration then the image should scale to fit the containing element horizontally. Of course, in doing so the height will be decreased because Bootstrap's img-responsive sets a height of auto to the image.
Or you could just doing it manually by removing the img-responsive class and adding width: 100% to the image.
In this case it'd look something like this:
HTML:
<div class="row img-container">
<img src="img/bg.png">
</div>
CSS:
.img-container img {
height: auto;
width: 100%;
}
Check out the fiddle to crop the image & Try resizing the Result :-
http://jsfiddle.net/v94EA/
#media (max-width: 320px) {
#img_users {
width: 150px;
height: 450px;
position: relative;
}
#img_users:before {
content: '';
position: absolute;
z-index: -1;
background-image: url(http://1.bp.blogspot.com/_KRZSEI76J3c/TU_fMKDHnCI/AAAAAAAAD- s/bbxZFyvTcf4/s400/Coastal_Holiday%252C_Sand_Beach.jpg);
background-position: center;
background-repeat: no-repeat;
}
}
DEMO http://jsbin.com/eXOwICID/3/edit
DEMO http://jsbin.com/eXOwICID/3/
<div class="banner-wrapper">
<img src="http://placekitten.com/g/768/450" class="img-responsive img-banner center-block" />
</div>
CSS
#media (max-width:320px) {
.img-responsive.img-banner {
max-width:none!important;
position:absolute;
top:0;
left:-25%;
max-height:275px;
}
.banner-wrapper {
position:relative;
overflow:hidden;
max-height:275px;
width:100%;
height:275px;
}
}
I'm just making a guess on the size of the original image and the left position. You'll have to play around with this.
Related
The problem I have here is because we use a theme (wordpress) for our clients that makes it easy for them to change an image and this is a simple version of the code it produces:
<div class="row">
<div class="column">
<img class="image" src="image user can change">
</div>
</div>
What I need to try and achieve is a layer over the top of the image to put a logo on the image without changing the core HTML that the theme produces and only using CSS.
My thought was adding a background image to the class column and somehow bringing it in front. I tried z-index on the column with no luck. Any ideas?
You can use pseudo-elements to achieve what you are after. Try using something like the following code:
.column {
position:relative;
}
.column:after {
content:"";
position:absolute;
z-index:2;
background:url(your-image.jpg);
}
.column img {
position:relative;
z-index:1;
}
Here is an example fiddle:
https://jsfiddle.net/scooterlord/cqhf2gw4/
I think you could take advantage of the :after selector in your column class. Something like this:
.column {
position: relative;
}
.column:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
bottom: 10px;
right: 10px;
background-image: url('path/to/logo.png');
}
That would position a small logo in the bottom right.
Add new class .overlay add the img logo path, give the parent position:absolute;
.image {
height: 200px;
max-width: 100%;
}
.overlay{
position:absolute;
/*positioning here*/
}
.overlay img{
height: 30px;
}
<div class="row">
<div class="column">
<div class="overlay"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></div>
<img class="image" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">
</div>
</div>
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I'm trying to create a centered div with 2 images, side by side, and have the one on the right jump under the first image when the browser scales down. And for all of it to be centered.
I tried doing it using divs but I'm stuck and can't figure out if what I'm doing is even correct. Right now the images don't scale down.
Here's a fiddle with my code:
http://jsfiddle.net/v5dejopw/1/
.wrapperlookbook {
overflow:hidden;
width: 1200px;
margin:0 auto;
padding-top: 60px;
}
#onelookbook {
float:left;
width:585px;
}
#twolookbook {
background-color: #fff;
overflow:hidden;
min-height:600px;
width:585px;
}
#media screen and (max-width: 600px) {
#onelookbook {
float: none;
margin-right:0;
}
}
img {
max-width:100%
}
Can anyone point me in the right direction?
Thanks!
My sugestion is add this in your code: if want in one line:
.wrapperlookbook {
max-width: 1200px;
width: 100%;
}
#onelookbook {
width: 50%;
}
#twolookbook {
width: 50%;
}
If want in two line:
#media screen and (max-width: 600px) {
#onelookbook {
width: 100%;
}
#twolookbook {
width: 100%;
}
}
Good luck!! ;)
The problem was about width of your elements. Check it out here:
.wrapperlookbook {
overflow:hidden;
width: 400px;
margin:0px;
margin: auto;
padding-top: 60px;
border: 1px solid green;
}
#onelookbook {
float:left;
width:200px;
}
#twolookbook {
background-color: #fff;
overflow:hidden;
min-height:600px;
width:200px;
}
#media screen and (max-width: 600px) {
#onelookbook {
float: none;
margin-right:0;
}
}
img {
max-width:100%
}
<div class="wrapperlookbook">
<div id="onelookbook">
<a href="#">
<img src="http://placehold.it/585x600" width="585" style="max-width:100%;height:auto;"></a></div>
<div id="twolookbook">
<a href="#">
<img src="http://placehold.it/585x600/c0c0c0" width="585" style="max-width:100%;height:auto;"></a></div>
</div>
Ps: I decreased the width here
I think work with bootstrap is a good option for you, since bootstrap takes care of the resizing of every element.
First, download the latest version of bootstrap from: http://getbootstrap.com/getting-started/#download
next, reference the files in the head
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
then, add a couple of div in your body
<body>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
<img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
<img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
</div>
What means this? Bootstrap works in 12-column mode. In this case, I made two with width 6 each (50%) for resolutions xs (extra small), sm (small), md(medium) and lg(large). Bootstrap will resize the divs depending on device resolution, and, if you resize the browser, the page will be resized accordingly.
This is only a basic example, but can help you as start point to use bootstrap.
I have an image that is to be used as a background for a series of "slides" that are all contained within one page. There are four slides total. Each slide is the height of the screen. So I need the background to be 4x screen height. I would also like the image to scale with the screen width. The image is very tall and it does not matter what part of the background is on each slide, so keeping aspect ratios shouldnt be a problem.
The issue i am having is that when i make a window with a width smaller than the images width, part of the image gets cut off instead of scaling to the screen width. My css so far:
#container {
position:relative;
height:100%;
}
#background {
position:absolute;
width: 100%;
height:400%;
background:url(photo.png);
}
.slide {
width: 100%;
height:100%;
position:relative;
}
And the HTML:
<div id="container">
<div id="background"></div>
<div class="slide">
Content 1
</div>
<div class="slide">
Content 2
</div>
<div class="slide">
Content 3
</div>
<div class="slide">
Content 4
</div>
</div>
Note, must be compatible with IE8 and above (ie CSS3 stuff)
Maybe you could use something like that:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
and than in css
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
I dont know why you dont want to use css3, maybe you got some good purpose, but still I'd recommend to use that.
css3 code is :
background-size: 100%;
You can use Css3 property Background-size
#background {
background-size: 100%;
}
I'm learning CSS at the moment and I am using it on a website to control the layout of the site.
I Have a number of containers, 5 of them, all on top of each other, I have a background for the page but I also want to use a background for one of the containers. So I used the 'background-image:url("");' tag to use a background, the I also used the attachment, repeat. The problem I was the image wasn't setting itself to the container, it was pushing out way past the dimensions that I had set in my CSS code which were height:312px; and width: 1000px;
Here is the CSS
html, body
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
}
.hidden
{
display: none;
}
#page-container
{
width: 1000px;
margin: auto;
background: transparent;
}
#header
{
height: 130px;
}
#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
}
Here is the HTML:
<div id="page-container">
<div id="header">
<div id="flashContent">
</div>
</div>
<div id="content-top"><!--<img src="images/pic.png">--></div>
<div id="portfolio-container">
<div id="portfolio1"><p>1</p></div>
<div id="portfolio2">2</div>
<div id="portfolio3">3</div>
<div id="portfolio1"><p>4/p></div>
<div id="portfolio2">5</div>
<div id="portfolio3">5</div>
</div>
<div id="main-content">
main-content
</div>
<div id="footer">Footer</div>
</div>
I haven't pasted all of the CSS but its needed let me know.
Its as if the background is filling a space that is a lot bigger than the space specified.
Last time I needed to do something like this, I did the following:
#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }
And then on my page I included the following:
<img id="background" src="whatever.jpg" alt="" title="" />
And that was it. This actually works quite nicely, with the background image magically resizing itself until one of the dimensions (width or height) reaches the maximum specified.
It doesn't need CSS3 support. Try it and see.
Obviously tweak the positioning stuff if you don't want it to fill the screen (I did).
You will have to set background-size to 100%
It only works in browsers supporting CSS3
Try float:left in #contentTop
Hope that helps!
In css you also have background-size:contain/cover