How do I resize the visible portion of my image inside postbox-inner? How do I resize the overall box of postbox-outer?
I'm basically looking for smaller images because a lot of them are invariably low-res and tend to pixelate in ugly ways, or alternately a way to resize my grid.
Preferably both.
<!--{block:Photo}-->
<div class="postbox-outer">
<div class="postbox-inner"
<a href="{Permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0" />
{block:Caption}<span class="desc">{Caption}</span>{/block:Caption}
</a>
</div>
</div>
<!--{/block:Photo}-->
As I understand it, you want the images to be displayed at it's best possible size. If it's a huge image you want it constrained within the div. If it's a small image you don't want it to fill the div. The best thing I could suggest is to set the max-width for the image to 100%. Here's the CSS rule:
img { max-width: 100%; }
Hopefully this should work out fine. Do let me know if this answers your question.
Related
I'm trying to achieve something but i don't know the right way to do this. Hopefully someone can help me in the right direction.
With responsive images the image will get smaller as soon as the screen is as big as the image and then the image will get smaller together with the screen (if I'm right). But i am trying to make an image get smaller as soon as the screen gets smaller.
This is the page https://videosafari.nl/banner-test/ and it's about the red logo (NPO1).
The actual problem is that the images underneath the logo get smaller when the screen gets smaller but the logo stays the same size. I want the logo to stay in proportion with the images underneath it so i would like it to get smaller to. Any suggestions?
.carousellogo {
display: inline-block;
margin: 0px 0px 12px 30px;}
<div class="carousellogo"><img src="https://videosafari.nl/wp-content/uploads/800px-NPO_1_logo_2014.svg_.png" alt="" width="75" height="" class="alignleft size-full wp-image-23274" /></div>
The original image is width="149" height="100" but i made it smaller to make sure the image stays sharp at retina screens. width="75" height="".
I hope I was clear enough and thank you for taking the time to read my question. BTW i am just a beginner with css and html.
Have a nice day and stay safe.
you can use width: calc(4vw + 30px); on .carousellogo to control the width of the element to 4% of the viewport and add another 30px to it. I tested the code calc(4vw + 30px) looks perfect for your site on both desktop and mobile. Hope it helps.
I want my responsive Webpage to load the appropriately sized images. I currently have an HTML template that looks like:
<picture>
<source media="(min-width: 950px)" srcset="{{ .Cover.Large }}">
<source media="(min-width: 600px)" srcset="{{ .Cover.Medium }}">
<source media="(min-width: 300px)" srcset="{{ .Cover.Small }}">
<source media="(min-width: 150px)" srcset="{{ .Cover.Xsmall }}">
<img src="{{ .Cover.Medium }}" alt="{{ .Title }} poster">
</picture>
Large = 950x400
Medium = 600x252
Small = 300x126
Xmall = 150x63
Now I'm thinking this min-width is not going to work very well if the pictures are in a row or flexed. Isn't it best to define the dimensions of the image and let the browser download the most suitable source?
https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list
What's the cleanest way to do this? Confusingly in my own responsive experiments, the Large size is always loaded:
Picture element
Img srcset
First of all, are you using the same image for each scenario but only in different sizes? If so, you can probably just use the srcset attribute rather than the <picture> element.
The <picture> element is used when you require art direction-based selection, like if you're using a wide shot for the large screen and a portrait crop on a narrow screen, for example. The thing about the <picture> element is that it's used in situations where we want a specific image to display at a specific breakpoint, hence there is no ambiguity in terms of image selection when using the <picture> element.
Which links back to my original question, are you using the same image for each screen width but simply in different sizes? If so, a normal img element with the srcset attribute would serve you much better.
For fluid-width images, srcset will be used with the w descriptor and sizes attribute. There are two values in the sizes attribute. The first is a media condition. The second is the source-size-value, which determines the width of the image given that particular media condition. Below is an example of the srcset syntax:
<img srcset="uswnt-480.jpg 480w,
uswnt-640.jpg 640w,
uswnt-960.jpg 960w,
uswnt-1280.jpg 1280w"
sizes="(max-width: 400px) 100vw,
(max-width: 960px) 75vw,
640px"
src="uswnt-640.jpg" alt="USWNT World Cup victory">
Here, I’m telling the browser that for viewport widths up to 400 pixels, make the image 100% of the viewport width. At viewport widths up to 960 pixels, make the image 75% of the viewport width. And for everything above 960 pixels, make the image 640 pixels. The browser utilises the information from srcset and sizes to serve the image that best matches the stated conditions.
Full disclosure: I lifted a lot of this from an article I wrote previously on this topic
This is what I wanted, 4 images flexed across a screen that are backed with multiple renditions of the JPG in order to save client bandwidth. Note the code is missing a src= attribute to make it valid.
body {
display: flex;
align-items: flex-start;
}
picture {
margin: 1em;
}
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
So I learnt several things:
How to flex images
picture.img is fine, you don't need to use the source element
learnt about vw the view port size width, which is like a percentage of the screen, but you must you absolute values when calculating margins, e.g. calc(25vw - 2em). 25vw = 1/4 of screen with the picture margins 1em+1em either side
this stuff is really complicated, this example doesn't even use break points, which I would suggest you avoid for your sanity!
It does exactly what I want it to do. It loads the appropriately sized and bandwidth efficient image. If resizing down, it doesn't load a smaller image, which I want. And when it scales up, it does fetch a larger higher resolution image, which I do want in order to avoid any ugly artefacts.
Result: Efficient transfer of several JPG renditions
ive attached an image that illustrates my purpose.
http://postimage.org/image/9cmg2z8vv/
by default id like to have a big landscape or portrait image that is centered in the middle of the page. on click at the image a div should slide in from the right. the div should push the big image from center to left 50% of the screen, the big image should shrink to fit into the left 50% of the screen.
do you have any idea how to solve this?
Here is a crude javascript version. Not the best, but gets you started. I can't see your HTML, so I don't know what divs are inside other divs, but you can essentially do the same thing with transitions.
http://jsfiddle.net/jMwWK/1/
<div id="content">
<div id="holder">
<div id="image"></div>
</div>
</div>
<div id="slider"></div>
$(document).ready(function(){
setTimeout(function(){
$('#slider').animate({left: '-200px'});
$('#holder').animate({width: '50%'});
},1000);
});
I am trying to figure out how to rotate an image in a div depending on the screen size.
Basically there is this set up:
<div> <div with arrow pointing right > <div>
in a fluid row (bootstrap) and I need the arrow image to rotate 90 degrees to a down position because when in a mobile the divs will stack.
I thought about using a blank <div> and a background-image and media queries to change the image, but having to have a blank <div> with set pixel dimensions isn't great (or is it?).
Another thought was to have an <img> of the arrow inside the <div> and perhaps use jQuery to rotate it depending on screen size, but seems OTT, and possibly beyond me to figure out how to do it.
Any suggestions or hints would be more than welcomed. Maybe I am missing something really simple.
The solution from #Stuart works well -- here's another possiblity that uses CSS. This isn't necessarily a better answer, just different.
http://jsfiddle.net/panchroma/u4zWp/
HTML
<img src="../image1.jpg" class="rotateMobile">
CSS
#media (max-width: 480px) {
.rotateMobile{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
}
Good luck!
If you create two separate identical elements with two different images, you could set one to diplay at one size and hide the other, and vice-versa.
For example:
Html
<img class="arrow" src="arrow.png" />
<img class="arrow90" src="arrow90.png" />
Css
.arrow{display:block;}
.arrow90{display:none;}
#media handheld, only screen and (max-width: 491px) {
.arrow{display:none;}
.arrow90{display:block;}
}
I'm try to wrap text around a image and I'm using an img class on my style sheet to do it. It's loading the style sheet correctly and all the other style attributes are working correctly but the image. It works fine without codeigniter but for some reason if I add the class tag to the image in codeigniter the image does not show up.
code is below:
//CSS//
.imgWrap {
margin: 8;
float: left;
}
//html//
<img src="<?php echo base_url{'../images/image_1.jpg'); ?>"
alt ="landmark" class="imgWrap" />
Firstly, base_url(), not base_url{).
Secondly, margins (and most other things in CSS) need units. Pixels (px), points (pt), picas (pc), even inches (in) if you desire. Have a look at http://www.w3schools.com/cssref/css_units.asp
Thirdly, for a good image wrap, you will want it positioned absolutely (perhaps relatively, depending on what you're doing), give it a display: block; and possibly explicitly define the width and height.