so I am currently implementing a mobile version to my website and everything is fine except I want to be able make it so the image will fill 100% width of the screen whether the user tuns it horizontally or vertically. The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device. Any suggestions?
I currently am using
.blog{
padding:10px;
border-bottom:2px solid #eeeeee;
padding:10px;
background:#ececec;
}
.blog-img{
text-align:left;
width:100%;
margin:0 auto;
padding:10px 0 5px 0;
}
I've also tried:
min-width:100%;
The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device.
It is not working as expected because you are giving the parent element .blog-img a width of 100%.
You need to directly target the nested img descendant element and give it a width of 100%:
.blog-img img {
height: auto;
width: 100%;
}
Depending on what you're trying to achieve, setting a min-width of 100% may be better in certain cases.
.blog-img img {
height: auto;
min-width: 100%;
}
Using width: 100% will stretch the img element to a width of 100%.
Using max-width: 100% will increase the width of the img element to the maximum total width of the img resource. In other words, this will prevent the img element from being stretched larger than it actually is.
Here is an minimal example highlighting the difference:
<p>Using <code>max-width: 100%</code></p>
<img style="max-width: 100%;" src="http://placehold.it/50" />
<p>Using <code>width: 100%</code></p>
<img style="width: 100%;" src="http://placehold.it/50" />
Since you're optimizing your site for mobile browsers, be sure to set a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
How about this, add the image you want, as a background of a DIV or the document's BODY.
If you decide to go with a DIV, width: 100%;, height: 100%; and you can also include z-index, if you wish to go above or behind some content.
{
background-image: url(http://arianapierce.com/wp-content/uploads/2010/11/simple-lights-twitter-background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
I would also suggest you include viewport in your HTML, it makes the page much more stable.
Related
I have a site here: http://ideedev.co.uk/newseed/design/ and the banner at the top works great and just how I want it to - the banner image it 100% width of the site and the text floats in the middle and centre at all sizes.
However, for smaller mobile devices, I want to adjust the height of the image, so it scales down and keeps the ratio of the image in tact with the text still sticking in the middle. Can anyone help?
My HTML is here:
<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
<div class="centerd1111">
<h1><?php the_title(); ?></h1>
</div>
</div>
My CSS is here:
#absolute1111 {
position:relative;
width:100%;
height:50%;
display:table;
color: #fff;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% !important;
}
.centerd1111 {
display:table-cell;
vertical-align:middle;
text-align:center;
height:500px;
padding: 0 50px 0 50px;
}
Many thanks :)
Using image as a background image won't allow you to scale down image with screen size as you have to adjust the height manually to scale down the image which is not a good practice.
Using the image in HTML browser will be able to scale down the image, keeping the aspect ratio intact.
In your case, you can use media query for mobile to adjust the image height so the whole image scales down and the full image is shown.
Here is the code for the same:
#media only screen and (max-width: 500px){
.centerd1111 { height: 180px; }
}
Let me know if this works for you.
Thanks.
instead of background css attribute, you can put the image as element, in this way, you can manipulate it more easier. this if my fiddle. but for this fiddle, I only make it for mobile, so you need to apply this to #media query for mobile display.
https://jsfiddle.net/bdv2L0a0/
this fiddle, I made it that, the image's height will follow its proportion when the display becoming smaller
.background img {
width: 100%;
height: auto; //default value, no need to declare this
}
If you know the ratio of the image (proportion between height and width), you can do this:
.your-container {
overflow: hidden;
height: 0;
padding-bottom: 46.406570842%; /* image height / image width */
}
This is the trick used to embed iframes that maintain ratio in different viewport sizes. It's based on the fact that when you give a percentage value to padding property, it applies this percentage to the element width.
Also, you don't need to give display: table to center the text. You can just do this:
.your-container {
text-align: center;
position: relative;
}
.your-centered-text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
See this jsfiddle.
I am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.
This is what I have so far:
HTML
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS
.thumbnail2 {
display: block;
max-width: 123%;
height: auto;
width: auto;
}
header {
padding: 0px 250px 0px;
margin: 0 auto;
}
The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.
Please assist.
I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.
Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.
Additionally max-width should never be over 100%. Here is how I would restructure your code:
Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.
Codepen link
html:
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS:
.thumbnail {
display:block;
/* set width to 100% */
max-width: 100%;
height: auto;
width: auto;
}
header {
/* padding:0px 250px 0px; */
padding-bottom: 250px;
margin: 0;
/* set width of the header to 100% */
width: 100%
}
Try put the image inside the css (not an img tag)
.thumbnail{
background-image : url(MyImage.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
then it would auto adjust to the container .thumbnail width...
You could use JavaScript to dynamically adjust the image size with
the window size:
Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp
Try changing your code to something like this:
<style>
.thumbnail2 {
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./path/to/image");
min-height: 100%;
}
</style>
<div class="thumbnail2"></div>
You can edit the height of the image shown with min-height, and the width should be responsive.
I have few pages where I have included a background image with width 100% and height 100% in every page. That means whenever a page is loaded you'll see an image with 100% screen's size. Everything is perfect when I see these pages in my laptop. I'm facing problems when I view them in mobile screens.
I just want to know how do everyone deal in these situations. I mean how to make changes to my main div with width and height 100% in responsive screens?
The image is getting stretched if I set the background size to 100%.
Some part of the image is cut if I set the background size to contain.
I want the image's clarity should be perfect. Should I make the width of the main div to auto? Or else should I change the image in responsive screens?
Is there anyway to make this div look better in small screens?
I just want my main div to be apt in Responsive screens.
It shouldn't look line there is a defect in the image or in my code.
Here's my code of the main div :
html,
body {
width: 100%;
height: 100%;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
There are many options to make image responsive. Please Google out the approach that best suits your requirement. The solution which you will find helpful depends on the image that you are using. It depends on the size and quality of image.
I find the following links helpful.
https://www.w3schools.com/css/css_rwd_images.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
For Responsive Image
.class_name{
max-width: 100%,
height: auto,
display:block
}
And Full Screen Responsive Image use individual class like
.class_name{
background-image: url(image path) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
html,
body {
max-width: 2000px;
min-width: 100px;
height: auto;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
this should make it responsive. I don't know what you want the DIV to be like, so I left that alone.
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.
lets say i created a div with an id of header like this
<div id="header"></div> and on the css i write
#header{
width:100%;
height:100px;
background-color:#00ff00;
margin:0;
padding:0;}
well this creates a full width header but when i re size the width of the browser and using the scroll bar i scroll right i find that the background doesn't reach the full width of the browser its the same thing with when i use a background image does anyone know a solution to this
First of off, if you're going to be using this truly as a header you should use the
<header> tag to keep your HTML semantic instead of the usual <div> approach.
Second, you may be seeing 100% width issues due to default formatting on <html> and the <body>
If you want to have a full width header, you'll need to do something like this:
html,body{ /* basic html, body reset */
height: 100%;
width: 100%;
padding: 0;
margin: 0 auto;
}
#header{
width: 100%;
height: 250px; /* easier to visualize with a larger header size */
background: url('someimage.url');
background-size: cover;
background-position: center;
}
The background-cover css property is very useful to maintain aspect ratios especially if this is for a responsive site.
CSS
#header {
width:100%;
height:100px;
background: url(http://oi49.tinypic.com/9kpge0.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
DEMO