I've been testing different DPRs using Chrome and Firefox dev tools, and it appears that changing the DPR has no obvious effect on the final render.
I tried multiple test cases, both real life photos and illustrations. I made sure that the resolution of the image I used was significantly less than what would be rendered on a 2x or 3x display. See example below and use the responsive tools in Chrome or Firefox dev tools to change the DPR. I set the width of the image to be 500px in CSS. The intrinsic resolution of the image is 520 x 720 pixels. So on a #3x device it should be scaling that image to 1500px wide, making it look blurry.
Does my display need to support a 3.0 pixel ratio in order to simulate it?
body {
background: #dddddd;
}
img {
width: 500px;
height: auto;
}
<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">
I believe you're looking for
body {
background: #dddddd;
}
img {
width: 100%;
height: auto;
}
I think that's it? it scales the photo up, to stop it from scaling up you'd have to use max-width/max-height and set it to the highest you want it to go to before the %tage cuts itself off.
Related
To demonstrate this issue, I have a very simple webpage with a single div element with width set to 100%, and a background color to verify its width. On most devices I've viewed this on (PC, smart phones, tablets), everything behaves exactly as expected. However, I have an iPad pro 11" that will show the page properly in portrait mode in Chrome:
Portrait mode
But when rotating to landscape mode, it keeps the same width in pixels and does not extend to 100% of the new width:
Landscape mode
I tried searching for this issue for hours, but never seemed to come across anyone with my exact issue. I came across numerous answers that said to make various changes to the <meta name="viewport" ... /> tag, all of which I tried to no avail. It's almost as if rotating the device does not tell the browser that the viewport dimensions have changed. I am fairly new to front end web design and very new to responsive design for mobile devices, but it seems like something as simple as an inline style for width 100% should suffice for my needs here.
Can anyone offer some guidance?
EDIT: I discovered that I can load the page initially in landscape mode and get the desired 100% width, but then when I rotate to portrait I have the opposite problem - the element extends to the right beyond the edge of the screen. And again this only seems to happen on this specific model of iPad (Pro 11).
My trick for always getting the HTML body to occupy the whole page while the children can behave responsibly is doing:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
Then the child div inside the body could be:
div {
background: red;
height: 20px;
width: 100%;
}
The trick here is basically making the body responsive with the browser's viewport and allowing the children to flow inside the body.
Tip: try to brush up on CSS3's Flex and Grid model, which is the norm nowadays, and will allow you implement flexible layouts.
Using Object fit, if I set the height to 100vh it works properly, though if I change it to anything else, it no longer remains the correct size but shrinks down to fill the space as the window shrinks.
Is it possible to keep it proportional like at 100vh but to not actually have it take up the full amount of available space? I am ok with portions of the video being clipped off, I just cant seem to figure out how to get this to work.
Basically what I want is that on mobile 100vh is fine, I have text overlay on top of the video so the extra space works. But on large screens, there is too much unused space over this video (another as well on the full site but figure the same methods can be used to fix that also) and I would like to probably shrink it down to closer to 50 to 65% of the total size.
Below is the CSS I am using on the video currently, there is also a link to a live site of the video since I dont believe I can upload that to SO.
https://tsukiyonocm.github.io/test/
#services {
position: relative;
}
#servicesVid {
height: 100vh;
width: auto;
position: relative;
-o-object-fit: cover;
object-fit: cover;
}
your question is not very clear but i would recommend using Media queries to apply different styles for different media types/devices.
for example if you want to set a specific style for larger screen devices such as laptop you have to use :
#media screen and (min-width: 1400px) {
//your style for these devices that have 1400px+ screen width
}
I am trying to print out an ID card from a web page. It's important that the card print out to an exact physical size on the paper, which for our purposes here can be 3 inches wide by 2 inches tall.
Each card is an image in a <div> element and here's what I think is the relevant CSS:
#media print {
#page {
margin: 0.5in;
}
.card__print {
width: 3in;
height: 2in;
}
.card__print img {
max-width: 100%;
}
}
When I print the card on Safari, it is about the right height (2in), but slightly too wide (~3.25in), which means the card is actually being stretched.
When I print on Firefox or Chrome, the card seems to have the correct aspect ratio, but it's slightly too narrow and too short. Both printouts are exactly the same as one another, however.
All three browsers are set to 100% scale.
Is there a way to fix this issue, or do the various browsers simply interpret the page differently?
I am making a web user interface for an embedded device and I want to replicate that user interface in the form of a website.
Basically I need a single view container that will be centered on a desktop and resize according to the viewport, but fill a mobile screen. The image below shows what I want:
As far as I can see the common solution are media queries but those seem a bit tricky for what I want. Especially since I don't particularly care about the resolution, but more about the screen size. Pretty much any smartphone will have a large enough resolution to fit everything that I want. Probably an ideal solution would be just to ask the device if it is desktop or running on a screen larger than 8". But as far as I know that can't be done.
You can use
html, body {
width: 100%;
height: 100%;
}
#main_wrapper {
width: 100%;
max-width: 800px;
height: 100%;
max-height: 800px;
position: relative
margin: 0 auto;
}
This leaves open vertical centering (do you even want that?) or a margin-top for desktop-devices, which should be done with a media-query that includes min-width and/or min-height.
Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:
#bannerPages {
height: 296px;
margin-top: 183px;
width: 100%;
}
The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?
Looks like you have a media query that is making the width 140px !important.
Try changing the img on the media query to this
img {
width: 100%;
height: auto;
}
I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.
Remove the image from the bannerHome element and add the following code to the CSS.
.bannerHome {
background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
background-position: center center;
background-size: cover;
height: 890px
}
http://jsfiddle.net/9sqjs/2/
That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.
http://jsfiddle.net/Q64S2/1/
Have you tried making the image a background image instead?
For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.