I'm using a viewport device-width in my code. It works fine on cellphones for both text and pictures. The problem is, it zooms pictures too much on big screens so I tried to use media queries like this:
.img {
width:100%;
height:auto;
text-align:center;
}
#media screen only and (min-device-width:800px) {
.img {
width:1000px;
height:auto;
text-align:center;
}
}
Class .img is applied to the div containing <img>
With that, it works fine on big screens now, but it doesn't work on mobile anymore. The text is still fine but the image doesn't resize to the device width like before (and like in the meta viewport). I have no clue how to fix it.
If somebody has an idea,
Thanks,
Another option is to use max-width for an image. If an image is being stretched you would want to pick the largest size of the image as the max.
.img {
max-width: 500px;
}
That way the image will only stretch out so far.
Thanks for your answers guys. As i expected, the problem came from me. My "img" class was applied to the div containing the img.
The problem is, by this way, the width and max-width didn't work.
I just splitted the .img class into two class. the .divimg containing the text-align appy to the , and the .img containing width properties apply to the (not the like before).
Now it works fine. Thanks for help.
you can use id:
<html>
<head>
<title>Untitled</title>
<style>
#media screen and (max-width:600px){
#first{
width:100%;
}
}
</style>
</head>
<body>
<img src="" id="first" />
</body>
</html>
Related
I have setup a wordpress theme that uses featured images for header images on pages (I did this to make it easy for clients to modify on their own). Because the header image container needs to be a fixed size (100% width of the page and 300px heigh), I am using the "object-fit:cover" css callout which works perfect. The resulting effect is the image spans the full width of the page, and then is cropped vertically automatically (I did this so client would not need to manually size/crop the images before uploading them).
It works perfect with the exception of IE (of course). I have tried numerous possible workarounds from the "backgroundsize.htc" fix to javascripts, to absolute positioning and using the clip css feature, but it still does not give me the desired effect. IE insists on stretching the image. At this stage I am not sure if this is even doable in IE.
Here is my css for the featured image:
.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
img.wp-post-image {
max-height:300px;
margin:0 auto;
}
This code works in all browsers except IE, so I am using this code to feed IE overrides for the featured images:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wp-post-image {}
img.wp-post-image {}
}
Does anyone have advice for me as to how to force IE to "fill" the featured image container with its respective image and crop it instead of stretching it? Any help is really appreciated...
Put the image in a containing div with strategic use of overflow: hidden
.wrapper {
height: 100px;
overflow: hidden;
}
<div class="wrapper">
<img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-and-wrap-it-up-3.jpg" width=600 height=700>
</div>
Okay... figured it out. I hope this solution can help someone else in the future and a big THANK YOU to Anthony for his suggestion of the wrapper... something that I thought I had to avoid...
If you are wanting to implement a featured image in your Wordpress theme that automatically crops the media file a person uploads and not have IE screw it all up, do this:
For your regular featured image - add this implementation to your wordpress theme (I usually add it in the header.php file):
<div class="wrapper">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
Then add this in your css:
.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
.wrapper {
height:300px;
overflow:hidden !important;
}
This will work with all browsers except IE (naturally). IE (even version 11) will skew the image within the featured image div. To fix that, add this code to the bottom of your css:
/*IE HACK*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
img.wp-post-image {
max-width: 100%;
height:auto;
width:auto;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
}
Adding the "max-width" and the "auto" for the regular height and width callouts, is what I was missing before.
Thanks to Anthony's suggestion to use a wrapper for the featured image, I was able to fill the wrapper with the image and force IE to not skew it. To make the image center (vertically and horizontally) in IE, I added the "top,left,transform" code which centres the large image within the wrapper in IE 11...
For anyone else using the twenty seventeen theme template, just chuck this into the "Additional CSS" section which is accessed by clicking "Customise" from your admin bar at the top of the screen. After a long time googling with limited coding knowledge, this has worked for me so figured I would share :) Special thanks to this thread for getting me in the right direction!
.single-featured-image-header img {
width:100%;
height:100%;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
.single-featured-image-header {
height:25em;
overflow:hidden !important;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.single-featured-image-header img {
max-width: 100%;
height:auto;
width:100%;
}}
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}
I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
I'm finding it tricky to resize images to make them responsive.
I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.
I've successfully added a wrapper class to every image on a website and can re-size the images quite well.
My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.
My code currently converts:
<img src="[src]" />
into:
<div class="erb-image-wrapper">
<img src="[src]" />
</div>
Where I use the following CSS:
.erb-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?
.erb-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
Worked for me.
Thanks for MrMisterMan for his assistance.
Use max-width on the images too. Change:
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
to...
.erb-image-wrapper img{
max-width:100% !important;
max-height:100% !important;
display:block;
}
check the images first with php if it is small then the standerd size for logo
provide it any other css class and dont change its size
i think you have to take up scripting in between
um responsive is simple
first off create a class named cell give it the property of display:table-cell
then # max-width:700px do {display:block; width:100%; clear:both}
and that's it no absolute divs ever; divs needs to be 100% then max-width: - desired width - for inner framming. A true responsive sites has less than 9 lines of css anything passed that you are in a world of shit and over complicated things.
PS : reset.css style sheets are what makes css blinds there was a logical reason why they gave default styles in the first place.
the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover.
background-image : url('YOUR URL');
background-size : cover
Use max-width:100%;, height: auto; and display:block; as follow:
image {
max-width:100%;
height: auto;
display:block;
}