How do i, change the size of picture that their size more than a certain size with css . For example, how do i change the appearance of photos that their width is more than 300 pixels.
Some basic info on working with images:
http://www.w3schools.com/w3css/w3css_images.asp
Some possible ways to resize images:
Either style the image through css:
img {
width:200%;
}
Or do so with inline css
<img style="width:500px;" src="..."/>
or use HTML attributes
<img width="30px" height="auto" src="..."/>
As shown here you can use different kinds of units too. px, %, em, rem, vw & vh are some that are available.
Media queries
If you want to apply different styles depending on the page size, use media queries.
Image-size dependent styling
If you want to apply different styling to your image depending on it's source size, I think you're out of luck. You can use javascript to do it, but as far as I know there isn't a pure CSS solution.
Nota Bene
It should be noted, though, that your question raises the suspicion that you didn't even bother googling, as this is absolutely basic HTML / CSS.
You can use the min width/height and the max width/height:
Example:
p {
max-width: 100px;
}
If you want a more control u can use media:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Related
I'm familiar with using breakpoints to change my styling for height, width, font-size, and so on, but I'm having trouble finding examples of changing an image based on my screen size.
Specifically I want to replace the image with a new image depending on screen size. My assumption is that I want the image set up as its own component to start...
import React from "react";
export default function ResponsiveLogo() {
return(
<div>
<img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder"
alt="logo placeholder"/>
</div>
)
}
I believe that I'm supposed to handle this using useMediaQuery but am unsure of the syntax. As I haven't used useMediaQuery before I'm looking for one example of doing this at one breakpoint so I know how to proceed.
as an example lets assume we want to change images for any screen smaller than Material-UI's "sm" breakpoint (600px), and we want to swap in this image: "https://dummyimage.com/200x200/4169e1/fff.png&text=Logo+Placeholder"
Thanks for any direction!
I found an easy way to do this on MUIv5 using MUI components, but you have to use the MUI Box component for the image element so you can access the sx prop. (They use Box for image examples in the official docs so I think it's recommended anyway)
The idea being, instead of setting the image source with the 'src' attribute, you set it via the 'content' CSS property within the sx prop. This way you can easily access MUI theme breakpoints when setting the image url:
import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";
<Box
component="img"
sx={{
content: {
xs: `url(${SmallLogo})`, //img src from xs up to md
md: `url(${BigLogo})`, //img src from md and up
}
}}
alt="Logo"
/>
There are several ways to accomplish this. If your image was a background for example you could change it the same way you use a CSS breakpoint to change any other CSS attribute.
However, since you're using an image element in the HTML, you can either watch for window size changes in javascript or use an HTML solution.
Option #1 Javascript:
window.onresize = function(){
if(window.width > 600){
// do something like change img src path
}
}
There are a lot of pitfalls to this approach. It can destroy performance if it's not implemented correctly and you need to figure out the sizing of the correct elements in JS.
Option #2 srcset or picture element and srcset
This is a way to build responsive images directly in HTML that allows multiple file paths for an image. An image on its own with srcset is a bit complicated (explained better in the link) so I prefer a <picture> element.
Inside your React component you would have something like this:
<picture>
<source media="(max-width: 400px)" srcset="mypic.jpg" >
<source media="(max-width: 1200px)" srcset="myOtherPic.png">
<img src="fallbackpic.gif" alt="alt text for pic">
</picture>
This is cool in that you can have as many source lines as you want each with a media query style condition. They can even be different file types and you can set each of them dynamically just like you would any other HTML element attribute.
The only catch is that <picture> is an HTML5 element so you need to target a newer browser for this to work.
(sorry for the probable mistakes, I'm not a native english speaker)
I'm trying to work after another developer on a wordpress website. I am triyng desperately to get a fullwidth image to cover 100vh in height too, but whatever I do, I get the div to 100vh, but the image keep the same size. I've tried in the inspector and if I directly apply the style
min-height : 100vh;
it works perfectly but I cannot found anywhere in wordpress to apply this style to the image directly. I even tried via a child selector in the global custom css
#my-image-id img
{
min-height : 100vh;
}
HTML:
<div id="title-image" class="et_pb_module et_pb_fullwidth_image et_pb_fullwidth_image_0">
<img src="PRIVATE.jpg" alt="" title="" srcset="PRIVATE.jpg 3408w, PRIVATE.jpg 300w, PRIVATE.jpg 768w, PRIVATE.jpg 1024w, PRIVATE.jpg 1080w" sizes="(max-width: 3408px) 100vw, 3408px">
</div>
or in the custom css of the element, it's like wordpress just cannot read it, the property isn't even present in the inspector (not even striked). (And I tried to add an "!important" despite everything, it changed nothing)
Thank you already !
Hopefully this is a simple answer. I have a page that on desktop needs a series of share icons (fb, tw, ig) underneath a paragraph of text. But on mobile, these icons are included in a template already so I don't need them to show. It looks repetitive. I am using a CMS and only have access to the body text of the page, not the headers, so extensive javascript isn't ideal. What inline CSS styling or other such magic will make this div disappear? And can I shrink it only on verified mobile devices or is it better to do it just with the browser window size?
Currently the code is very simple:
<html>
<body>
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
</body>
</html>
All I need to do is make "mydiv" disappear if I'm using an iPhone, iPad, or Android device...
Thank you!
You can use media queries:
A media query consists of a media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Documentation:
MDN
w3schools
For example:
#media (max-width: 787px) {
#mydiv {
display: none;
}
}
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
I would like to show a video inside a web browser, in full screen using HTML5 tags.
Here my online test, that you can run and see the source code:
http://rospo.altervista.org
My problem is that I am unable to avoid margins (blank borders),
in other words I can't obtain a real FULL SCREEN
In the screeenshot here below I show the unwanted margins:
Any idea to get a full-full-screen ? :-)
BTW, double clicking on the image
I get finally a real full screen but I think in this case come in the game thge flash player, isn't it ? The point is that i would like to visualize the full screen video also froma a smart/phone/tablet browser (without any flash player ....)
Many thanks!
giorgio
I've checked the HTML in your page and if it doesn't contain any PHP coding with markup, then I would suggest you make the body margin to zero
CSS
body{
margin: 0;
padding: 0;
}
I believe in your css you have the page body with 8px margin.
UPDATE after the PO comment in this answer
to get the scroll bar out, you need to modify the height property value in you inline style of your <video> markup in this line
<video autoplay="" loop="" controls="" style="width: 100%; height: auto;">
the line should be
<video autoplay="" loop="" controls="" style="width: 100%; height: 100%;">
I believe this should solve this precise problem.
P.S. general advice: always separate your style from your HTML in an external .css file to make it easy for you to change and update the look and feel of your website.
So the new Picture element looks like this:
<picture>
<source ... />
<img browsers will fall back to this width="10" height="10" />
</picture>
In our CSS, we want to set say a background color.
picture {background-color: red};
img {background-color: yellow};
Will a Picture enabled browser just show a red background, while non enabled browsers show a yellow background? Or a combination of the two. Likewise, will an Picture enabled browser see the height/width attributes on the img element, or is the img element ignored completly?
The idea of the picture element is that that it simply provides source information for its enclosed img element, and that it is always the img element that is rendered, not the picture element.
However, I can't see anything normative in the spec that suggests that the picture element will be treated by default as anything other than an inline element, so I expect that you will be able to style it with a different display setting, give it padding etc., in the same way as you can do with span elements, in which case, the background-color will behave in the same way as a span element around an img element does today.
So targeting both might be appropriate. The backgrounds will simply layer as normal. But the img will be rendered, so in your scenario, the background behind the image will be yellow, assuming of course that the img has at least some degree of transparency.
Since no browser supports it, guess we'll need to wait to see the implementation, but by the looks of it so far, and according to current docs, it seems img tag will be completely ignored and only used as fallback.
The new implementation is as follows:
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
since you'll need to define the images inside <picture> element as sources and you won't have an img tag, implementation in browsers with Picture implementation shouldn't recognize anything inside an img tag unless the media src isn't defined.
However, it's easy to see this approach will cause a double download of images since browsers download all <img> tags first. Because of this, there's a proposal by David Newton: to use <object> or <embed> as fallback image containers to avoid duplication of images being downloaded.
All the above being said, we just need to wait, but in short, my answer is that your first option picture {background-color: red}; is the correct one