w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How do I scale a linked image inside an SVG from top (currently scaling from center oddly)
This is a webkit bug. See Using a svg with width=100 and height=100 I got extra space in safari e chrome for some possible solutions.

Categories : HTML

Resizing background-image always proportionally to scale with a center point
You are looking for this combination: background-position:50% 50%; /* Sets reference point to scale from */ background-size:cover; /* Sets background image to cover entire element */ Working sample fiddle here. Note that this is not supported by IE8 and will require JS hackery there if you need IE8 or older to be supported.

Categories : CSS

Scale background image of div to a fixed width; auto-scale height
Any reason you can't add <img src='base64'/> inside the div elements then in the css have div{background: 0px 0px} to hide the div background and have img{width:171px}? See the modified jsFiddle. That solves the problem, but not sure if you are able to add the img tag. Let me know and i'll see if another solution can be found.

Categories : Javascript

D3 - Center and scale sector on map
I'm also very new to d3 - will try to explain how I understand it but I'm not sure I got everything right. The projection has the concept of a center, given in map units: projection.center([location]) If center is specified, sets the projection’s center to the specified location, a two-element array of longitude and latitude in degrees and returns the projection. If center is not specified, returns the current center which defaults to ⟨0°,0°⟩. There is also the translation, which is where in the screen the projection center stands, in pixels. projection.translate([point]) If point is specified, sets the projection’s translation offset to the specified two-element array [x, y] and returns the projection. If point is not specified, returns the current translati

Categories : Javascript

How to scale a shape from its center as origin?
You need to set the offset property to the centre of the shape using some trigonometry. By default Kinetic.Circle and Kinetic.Ellipse are offset in the centre, while the rest of the shapes are offset on the top left. In this example I'm setting the offset to half of the width and height (50 and 25), but you'll need to do some calculations on your hex object to get the centre point. var rect = new Kinetic.Rect({ x: 239, y: 75, width: 100, height: 50, fill: 'green', stroke: 'black', strokeWidth: 4, offset: {x: 50, y: 25} }); Or you can use the methods getOffset() and setOffset() http://kineticjs.com/docs/Kinetic.Shape.html#getOffset http://kineticjs.com/docs/Kinetic.Shape.html#setOffset JSFIDDLE

Categories : Javascript

How To Scale Object Along Any Axis (In 3D Space)
Scaling matrices are of the form: {{s_x, 0, 0, 0}, {0, s_y, 0, 0}, {0, 0, s_z, 0}, {0, 0, 0, 1}} Assuming uniform coordinates. To apply them, you need to scale, then rotate, then translate. I recommend using gl functions to do this. Assume you want your object at position x, y, z, and its rotation is in a quaternion {theta, r_x, r_y, r_z}. Scaling and rotation need to occur in the model coordinate frame. GL applies the transformations in an appropriate order, so its code would look like this: glTranslatef(x, y, z); glRotatef(theta, r_x, r_y, r_z); glScalef(s_x, s_y, s_z); //draw my model

Categories : C++

infinite number of maximally unbalanced red black trees
Now my guess is that this family consists of basically all the red black trees that have one path with s-r-s-r ... nodes and the rest filled with black nodes. That's a reasonable guess. But how do I prove this? Describe an infinite sequence of trees T_0, T_1, T_2, T_3, ..., such that, for every integer n, there exists a tree in the sequence with at least n nodes. Show that there exists a constant C such that, for every i, the height of T_i is at least 2log(n_i+1) - C, where n_i is the number of nodes in T_i. (This is one possible interpretation of the ambiguous term "close to".) how do i formally write down how such a family looks like? Inductively. I'll do the all-black trees as an example. The tree T_0 is empty (base case). For all integers i > 0, the tree T_i consists o

Categories : Algorithm

Why is the left side of my image in the center instead of the actual center?
Change your CSS this way #profile-banner .logo { margin: 125px auto 0; background: #333; border: 1px solid #666; width: 250px; height: 250px; padding: 0px; } Changes Remove position and top. Add the top as margin-top. Positioned elements do not respect margins.

Categories : CSS

Possible to set a max-width for a background image? (want to scale background-image down, but not scale up)
I think that this is what your a re asking for demo The HTML is <div class="clientlist"> <div class="client"><div class="client1"></div></div> <div class="client"><div class="client2"></div></div> <div class="client"><div class="client3"></div></div> <div class="client"><div class="client4"></div></div> <div class="client"><div class="client5"></div></div> <div class="push"></div> </div> And The CSS is body, html { height: 100%; } .clientlist { text-align: justify; display: inline-block; width: 100%; } .clientlist .client { width: 18%; height: 90px; max-width: 200px; display: inline-block; } .clientli

Categories : CSS

How to compute the center of a polygon in 2D and 3D space
First of all for a polygon, the centroid may not always imply equidistant lengths from the centroid to the vertices. In most cases this is probably NOT true. That being said, you can find the centroid simply by finding the mean of your x coordinates and the mean of your y coordinates. In Matlab: centroidx = mean(xcoords) and centroidy = mean(ycoords) are the coordinates of the centroid. See this if you really need more.

Categories : C++

Scale background image and foreground image at same ratio in Android
I think you should do it like this according to my skills <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:layout_centerInParent="true" android:contentDescription="@string/bg_desc" android:background="@drawable/bg_img" /> May be it will look as you want.

Categories : Android

Put a view in the center and fit the top and bottom in the remaining space
Check it, this should work <View android:id="@+id/view1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/viewCenter" android:background="#FF0000" /> <ImageView android:id="@+id/viewCenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/ic_launcher" /> <View android:id="@+id/view2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/viewCenter" android:background="#FF0000" />

Categories : Android

How can I center a container when the screen space is taken over by other element?
wrap the container with another div(ex. .wrapper).make the width of wrapper total view port width minus side bar width and then use margin:0 auto in container EXAPLE:: FIDDLE

Categories : HTML

Scale selected image in Android image gallery
you can do something along these lines File pngDir = new File(Environment.getExternalStorageDirectory(),"PicUploadTemp"); if (!pngDir.exists()) { pngDir.mkdirs(); } pngfile = new File(pngDir,"texture1.jpg"); FileOutputStream fOut; try { fOut = new FileOutputStream(pngfile); finalbitmap.compress(Bitmap.CompressFormat.JPG, 100,fOut); } catch (FileNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } pngUri = Uri.fromFile(pngfile); for the code you put up first add this method to your class public static int calculateInSampleSize( BitmapFactory.Opti

Categories : Android

Components in GridBagLayout are put to the center, without taking all free space
You're adding 10 panels which all have their own gridbag layout, checkbox and label. So each panel has its own grid, and the width of the cells are computed independantly, based on the components they contain. If you want a well-aligned single grid, you should have a single panel using GridBagLayout, and add your 10 labels and 10 checkboxes to this unique panel. Moreover, you should give a weightx > 0 to the label's constraint if you really want it to fill horizontally.

Categories : Java

Center a div, expand sibling divs to remaining space
Solution Using CSS Tables The following might be close to what you need. Your HTML is good as is: <div class='heading'> <div class='lines'></div> <div class='heading-link'><a>Link Text</a></div> <div class='lines'></div> </div> <div class='heading'> <div class='lines'></div> <div class='heading-link'> <a>Really Long Link Text that is still centered</a></div> <div class='lines'></div> </div> Try the following CSS: .heading { text-align: center; display: table; margin: 30px 0; /* for demo only */ } .lines { display: table-cell; width: 48%; /* the exact value is not that critical... */ border-top: 1px solid #2c2

Categories : CSS

center fixed-width element with divs filling the extra space
If I understand right, you have some element between two <table>s and the whole thing has to be centered. If that's the case, then make a <table> with the fixed width you want. Set its margin to be 0 auto. This will handle the centering and avoid problems with elements vertically stacking when the window is smaller. Make the table only have one table row (<tr>). That table row will have three cells (<td>), one for the left <table>, one for the element, and one for the right <table>. Inside of each of those cells, place your code for your <table>s / element. Edit (again): Updated for your last comment (Everything inside the colored <td>s are junk): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

Categories : HTML

Make image fill div proportionally and center image vertically
I've create a fiddle that helps achieve this result. However, this will cause the image to expand larger than its resolution if the div.frame width is greater than the width of its image. Assuming the following HTML <div class="frame"> <img src="http://stuffpoint.com/parrots/image/240658-parrots-white-parrot.jpg" /> </div> This would have the following styles applied .frame { width: 100%; height: 200px; overflow: hidden; position: relative; } .frame img { width: 100%; } Obligatory jQuery to center the image vertically on load and on resize $(function(){ centerImageVertically(); $(window).resize(function() { centerImageVertically(); }); function centerImageVertically() { var imgframes = $('.frame img'); imgfra

Categories : Jquery

How to set MKPinAnnotation so that bottom of image points to location instead of center of image
You'll need to calculate the number of pixels to offset and then set the centerOffset property. By default, the center point of an annotation view is placed at the coordinate point of the associated annotation. You can use this property to reposition the annotation view as needed. This x and y offset values are measured in pixels. Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.

Categories : Objective C

Is there a quick way to scale an image?
Processors have sped this up a lot, but it will depend on how big your source image is. As a data point, I use this same method to resize/crop camera photos in my app. On my iPad 2, this process is nearly instantaneous. You could also try setting putting the original image directly into the UIImageView and set the appropriate contentMode (probably UIViewContentModeScaleAspectFill). This other question could be relevant if it looks jagged: iOS UIImageView scaling image down produces aliased image on iPad 2 All that said, in my experience, it's normal and usually easier to just generate and include separate images for iPad and iPhone in your project

Categories : Iphone

How to scale down big image for different iOS devices
It sounds like you want your images to conform to a responsive design. I'd suggest reading up on them. This article might help: http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/

Categories : Javascript

How to scale image using getScaledImage?
Creating a new image does not update the ImageIcon. Change the order of your code: //BufferedImage image = ImageIO.read(new File("img.jpg")); //JLabel picLabel = new JLabel(new ImageIcon(image)); Image image = ImageIO.read(new File("img.jpg")); image=image.getScaledInstance(50,50, Image. SCALE_SMOOTH); JLabel picLabel = new JLabel(new ImageIcon(image)); add(picLabel); Edit: the original code you posted doesn't even execute. You can't cast the scaled image to a BufferedImage. I updated the code to solve the execution problem.

Categories : Java

how to scale image using getScaledInstance?
You need assign the return reference to something... Image scaled = b.getScaledInstance(x, y,BufferedImage.TYPE_INT_ARGB); label.setIcon(new ImageIcon(scaled)); You may also want to have read through The Perils of Image.getScaledInstance() Update with Mouse Wheel scaling import java.awt.BorderLayout; import java.awt.Dimension; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.awt.event.MouseWheelEvent; import java.awt.event.MouseWheelListener; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.text.NumberFormat; impor

Categories : Java

Image rotate and scale
you can try this code CGFloat Angle=(((int)slider.value*M_PI)/180); transform=CGAffineTransformScale(transform, photoImage.scale, photoImage.scale); transform= CGAffineTransformRotate(transform,Angle); photoImage.transform = transform;

Categories : Iphone

svg image does not scale in table
Not sure if you are already doing it, since you didn't include the SVG element definition, but you need to provide a viewbox attribute that indicates the area of the SVG you want to display. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox and http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute. For example, try removing the viewbox attribute in the following fiddle to see the result without viewbox: http://bit.ly/1cZysAh

Categories : HTML

how to scale image in email body?
I would go for setting: width: 100%; height: auto; Demo: http://jsfiddle.net/gjtC9/ Without CSS: http://jsfiddle.net/gjtC9/2/ The question if it's the best and correct way.. well if someone opens the email on a mobile phone where is the resolution quite small - so the huge image is scaled to smaller one quite a lot. -> The phone will be loading huge image which will be scaled to small - this brings me more to question, is that picture really necessary? Are you going to put there those pinguins or some image that has some information or something valuable on it? :D

Categories : Asp Net

Scale image for tablets and phones
UPDATE Yes you could use media queries check the following links to get started. Hope this helps http://mediaqueri.es/ http://css-tricks.com/css-media-queries/ sample example @media screen and (max-width:480px) { img { background-image:url('yourimage.jpg)"; height:50px; width:50px; } } @media screen and (max-width:750px) { img { background-image:url('yourimage.jpg)"; height:250px; width:250px; } }

Categories : HTML

bootstrap 3: How to scale a centered image
Why don't you use absolute positioning? You can use "position: relative" on the body (or the container you want your image to center in) and "position: absolute" with "top: 10%; bottom: 10%; right: 10%; left: 10%". I'd do something like this: HTML: <body> <div class="container-fluid"> <img class="splash-image" src="images/splash.svg"> </div> </body> CSS: body{/* your body style*/} .container-fluid { /* your container style */ position: relative; } .splash-image { position: absolute; top: 10%; bottom: 10%; left: 10%; right: 10%; }

Categories : HTML

Scale text to fit in a background image
You should modify your css for the background to be background: url(images/network_news_bg.png) bottom no-repeat; and then edit your image to be much taller. repeating the top upward if that makes sense. Then remove the height restriction and style accordingly with line height.

Categories : CSS

Set a background image's position to scale
As kangaroo has written, the solution was to set: background-size:contain; for #main. This CSS property is supported by IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

Categories : CSS

HTML/CSS Background image scale to 100%
This is best left to CSS. Hard to tell without your code exactly, but the following should do what you want: CSS html { height: 100%; width: 100%; } body { width:100%; height:100%; } #background { width: 100%; height: 100%; background-image: url('http://www.placekitten.com/200/200'); background-repeat: no-repeat; background-size: 100%; } HTML <div id="background"> <div id="content"> Hello world! </div> </div> UPDATE See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/ UPDATE #2 I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same imag

Categories : HTML

How to auto scale an image for all resolutions?
Regardless of the resolution your app still sees logical pixels of 800x480 (or 853 for 16:9), so your image size will not change. That article only talks about providing higher resolution images so that the images, when viewed on a higher res screen (which is often larger in size) is of better quality. In terms of layout and size though they will remain the same regardless of screen resolution. To test this add an image to your app and run it across multiple emulators with different sizes and you'll see that it stays the same relative size regardless of screen resolution.

Categories : C#

IE8 scale image to fit container with ms-filter
Hmm figured it out. When adding "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"', sizingMethod='scale')" it works... Very strange! I've thought that IE8 only requires -ms-filter.

Categories : Jquery

Image scale and animation improvement
Ok, I found something. I have added transform: translateZ(0); and now i got 60fps in Google Chrome! http://jsfiddle.net/tXXmm/7/. It appears this property force the activation of GPU Acceleration in webkit browsers. It's seems to be a good tip to go for now. Thank you for your help!

Categories : CSS

How to do bar plot in the same scale and dimension as an image?
The challenge here is that "axis image" enforces an aspect ratio on the image axis, which allows the display size of the image to vary from its set dimensions. My suggestion is to forget the auto-sizing capabilities that come from normalized units, and adjust the sizes based on pixel sizing. If you set the size of the image axis to exactly the size of the image in pixels, then it will have the correct aspect ratio, and you can use the same size for the bar plot. load clown; % use a built-in demo image. Note the image is now in X %computing gradients dx=double(X(1:end-1,2:end,:))-double(X(1:end-1,1:end-1,:)); dy=double(X(2:end,1:end-1,:))-double(X(1:end-1,1:end-1,:)); % computing total magnitude a=sqrt(sum(dx.^2,3)+sum(dy.^2,3)); % projection on bottom h = mean(a,1); % drawing figur

Categories : Image

Android scale image for XXHDPI
You can have folders under /res that are named as follows (where "xxhdpi" refers to the Density): layout layout-xxhdpi However, you may actually be referring to the Size of the screen itself, which can be: layout layout-xlarge as an example... Please refer to the Android Providing Resources docs for more information on the flavors of folder names for resources.

Categories : Android

Objective c How to scale image view size (height) as per image size
You can use the following code snippet which will meets your requirements -(UIImage *)adjustImageSizeWhenCropping:(UIImage *)image { float actualHeight = image.size.height; float actualWidth = image.size.width; float ratio=300/actualWidth; actualHeight = actualHeight*ratio; CGRect rect = CGRectMake(0.0, 0.0, 300, actualHeight); // UIGraphicsBeginImageContext(rect.size); UIGraphicsBeginImageContextWithOptions(rect.size, NO, 1.0); [image drawInRect:rect]; UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return img; }

Categories : Iphone

Making an image scale on mouse over on a
The key to "zooming" is to show the user an image at half resolution. Then to "magnify" you pop-up a secondary canvas showing a portion of the full resolution image in a smaller "viewport". You might use this as a starting point. It's built using KineticJS but the code would be the same in straight Canvas/JS. Kinetic JS image Magnifier

Categories : HTML

Scale CSS sprite pixel art without image smoothing
The bad news: Unfortunately, it looks like your options are either using the canvas, using JavaScript, or living with anti-aliasing in Chrome and I.E. Here are some responses that might help you with one of the other two if you don't choose to live with the anti-aliasing: Links: Javascript-Only Solution - Old, slow, but works everywhere Canvas solution - New, quicker, doesn't work in non-compliant browsers Sorry there isn't better news for you on this.

Categories : CSS

Memory increasing by 20 MB every time i scale the image
I'll hazard a guess here, but i have a theory that you have a reference to the image that you pass into the scale function. You are then overriding image with the scaled image via image = UIGraphicsGetImageFromCurrentImageContext(); and you then return that. Are you sure you are discarding all references to the original image? otherwise it will sit around in memory, waiting to be used. Secondly, are you using imageNamed or imageWithData or imageWithContentsOfFile to get your original image? Both imageNamed and imageWithData (depending on how you get the data) can cause the app to cache the file for quicker read speeds later. I will share a parable i learned from a wise sage of IOS programming after a long and arduous journey "IOS will happily cache stuff for you, however, wh

Categories : IOS



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.