I've got a web page that displays a bunch of images. I want to make sure none of the images are greater than 200 pixels wide and 200 pixels in height. If one is, I'd like it scaled down so that the longest dimension is 200 pixels.
What's the best way to do this? CSS? JavaScript (jQuery okay)?
Assuming jQuery:
var img = $(img), width = img.width(), height = img.height();
if(width == height) {
img.width(200).height(200);
} else if(width > height) {
img.height(Math.round(height / width * 200)).width(200);
} else {
img.width(Math.round(width / height * 200)).height(200);
}
You may be able to just set the longest dimension and skip the ratio (if the width and height are not otherwise set in attributes, properties or CSS), but I haven't done browser testing to be sure if it works across the board.
Related
When it comes to CSS units:
I know vmin is relative to 1% of the viewport's smaller dimension.
I know % is relative to the parent element.
Is there any way I can combine them to get a child whose height and width will be relative to 1% of the parent's smaller dimension?
I'm looking for a CSS only solution if at all possible, but if not possible, then a Javascript solution is fine.
EDIT: I do basically want to maintain aspect ratio. My specific case is the following:
Parent div takes up about 80% of the entire screen. Child div needs to remain square shaped (same height and width) as the parent is scaled up and down. But I would like the child to be as big as possible while maintaining the square aspect ratio, so its height and width need to be 100% of the parent's smaller dimension.
<div id = 'parent'>
<div id = 'child'>
</div>
</div>
See this image for a visual representation:
You can use something like this:
const size_by_smaller_dim_of = (target_element, source_element, percents = 100) => { // target_el: child, source_el: parent
let h = Math.min(source_element.getBoundingClientRect().width, source_element.getBoundingClientRect().height);
target_element.style.width = (h * percents / 100) + 'px';
target_element.style.height = (h * percents / 100) + 'px';
};
Is there a way to preserve image proportions when using an tag?
The docs mention hard coding the dimensions but that's problematic when requesting arbitrary images
https://aframe.io/docs/0.6.0/primitives/a-image.html
as far as i see, the a-image is just a a-plane with an image source in a material.
It means the image will be streched over the plane, you can only mess with the
<a-image> height and width, which are the a-plane's height and width in meters,
<img> height and width, which specify the image dimensions in px, but the image still will be streched over the plane.
You could try to do it automatically, within a component, setting the a-planewidth and height depending on the input <img> width and height, having a px-meters ratio:
AFRAME.registerComponent('imageSetter',{
schema:{
img:{type:'selector'}
},
init:function(){
let lowResRatio = 0.01;
this.el.setAttribute('height',this.data.img.height*lowResRatio);
this.el.setAttribute('width',this.data.img.width*lowResRatio);
}
});
Check it out in my fiddle: https://jsfiddle.net/gftruj/5d9j9nqm/2/.
Otherwise, You need to prepare the images earlier on.
UPDATE
You can modify the component so it gets the image dimensions, gets a height/width ratio, and sets the width and height accordingly:
AFRAME.registerComponent('foo',{
schema:{
img:{type:'selector',default:''},
height:{}
},
init:function(){
let data = this.data;
let ratio = 1/100;
this.el.setAttribute('width',data.img.width*ratio);
this.el.setAttribute('height',data.height);
this.el.addEventListener('materialtextureloaded', (e)=>{
var w = e.detail.texture.image.videoWidth || e.detail.texture.image.width;
var h = e.detail.texture.image.videoHeight || e.detail.texture.image.height;
let ratio = w/h;
this.el.setAttribute('width',data.height*ratio);
});
}
})
live fiddle here: https://jsfiddle.net/5d9j9nqm/4/
Now it's fixing itself to a given height.
I have a small image in my project that I would like to resize responsively any time the resolution changes. I am currently using the class "img-responsive". With this class, the picture doesn't start resizing until the window reaches its edge. In this case, since it's a relatively small picture, this never happens.
Is there a built-in Bootstrap class I can use to have the image resize responsively at all times?
I ended up using JavaScript
$(window).resize(function(){
if($(window).width() < 1100){
var width = $(window).width();
var ceiling_width = 1100;
var difference = ceiling_width - width;
var decrease = difference * 0.2345;
var full_logo_width = 404;
var new_logo_width = full_logo_width - decrease;
$("#my_logo").css({"width": new_logo_width});
}
});
If the browser's width gets lower than 1100px then the picture will start shrinking. My image has a width of 404px by default (if the browser loads with a width of more than 1100px). I wanted the smallest possible width for the image to be a little over 200px. The per pixel decrease to per window width decrease variable (0.2345 in this case) was calculated based on this. I used the following CSS to set an upper and lower limit for the image's width.
#my_logo{
max-width: 404px;
min-width: 210px;
}
I'm trying to make a DIV width change as the browser size changes.
Not in some ratio that can be handled with percentage, but still with a dependency for the screen size.
I'm trying to make a div 80% max of the browser width, as long its divided by 20.
if screen is 1000px wide, so the div will be 800px, if the screen is 1024px so it will still be 800px (cause 80% of 1024 is 819.2, not divided by 20).
Except for doing a lot of media queries, I do not know how to do this.
This should hopefully get you on your way. It uses jQuery to resize the div by 20px increments. It's not perfect, but it's a start.
http://jsfiddle.net/ydtdS/3/
function tale(div,w) {
if(w%20==0) {
$(div).text(w);
$(div).css("width",w);
} else {
w = Math.floor(w / 20)*20;
$(div).text(w);
$(div).css("width",w);
}
}
$(window).resize(function() {
var windowWidth = $(window).width();
tale(".twenty",windowWidth);
});
tale(".twenty",$(window).width());
I have a div with some text:
<div style="white-space:nowrap;overflow:none;width:50px;">
With some text in it
</div>
How can I scale the font size of the text so all of the text is visible?
Contrary-wise. You could wrap the text in an interior DIV, measure its width with JavaScript. Test if that width is wider than the parent DIV. Get the current font size, and incrementally move it down 1px at a time until inner DIV's width is less than or equal to the outer DIV's width.
I've been doing something like this, to set the text scale relative to the parent (or window) width / height. You can avoid jQuery by using offsetWidth and offsetHeight instead of width.
var setBodyScale = function () {
var scaleSource = $(window).width(), // could be any div
scaleFactor = 0.055,
maxScale = 500,
minScale = 75; //Tweak these values to taste
var fontSize = (scaleSource * scaleFactor) - 8; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('html').css('font-size', fontSize + '%'); // or em
}
Short Answer: You don't.
You would have to try a size, render it, see if it fits, try another size, render it see if it fits, etc. Then you have to handle the case where the calculated font size is so small no one can read the text.
There are other options, if the text doesn't fit, add an ellipsis (...) to the end of the text, when you mouse over it, the div could expand, you could use a popup window or tooltip with the full text, or put the full text in a larger area of the screen.
Find another way.
Came across this JQuery plugin in my quest to find the same.
Github
Demo
Also came across this Jquery script when I was looking for the same thing. It has the added benefit over the others, as far as I quickly tell, is that it also adjusts for height as well as width.
Comes from here: http://www.metaltoad.com/blog/resizing-text-fit-container
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
$(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
adjustHeights(elem);
}
}