I'm not the best at using bootstrap but trying to learn. I have a row and 3 col-md-4's I put a image in each column and they look and fit great with the thumbnail class. But without that class the images are their full size and overlap and when I scale the browser down they stay big and you have to use the scroll arrow. I thought the col-md-4 would determine the display of the image but it seems not. When not using the thumbnail class do I have to just resize my photos to the size I want them to display? Please help me understand. Thank you
Try using max-width="100%" (or the class img-responsive). See the bootstrap docs for more info.
Related
This should be a simple fix but I can’t figure it out. Please excuse my lack of posting my whole code.
Here is the issue. I am using the following
`
<v-card>
<v-img :src=“{{person.png}}”</v-img>
<v-card>
`
I have an array of users with profile images. Some of these images are different sizes ( some may be 400w other maybe 250w ). My issue is that because these images are different sizes, that they actually end up making my cards ( which are uniform in size ), different widths and height. This makes the cards ugly of course, and I need help on how to fix this.
Now, I had a friend build a react project, and I providing him with pictures, but the sizes were off. I fixed this by importing all images into Figma and making them all the same height and width, which, worked. However, for this project, this method isn’t working for me and I need a way to auto size these images so that my cards stay uniform.
I do not want to use the v-avatar feature, so please refrain from asking me, because these aren’t really “avatars”.
One “solution” I found was to use “contain” but I can’t find any information on contain in the documentation and I’m not sure if that would even work.
Unfortunately in some edge cases you cannot depend only on the components provided by a framework and you need to improvise. This issue sounds purely like a CSS one. Instead of using vuetify component you could try to create own component and just apply the avatar image as element's background-image inline property. Then you could use background-size: cover in order to preserve correct ratio of uploaded images.
I never found a 1 size fits all fix for this, but this is what I did to make it work out.
1. I imported all images to figma
2. I edited the images to all be the same size, then used the crop tool to "fit" them to the new "canvas" size
3. Within my v-img , I added "contain", which insured that the picture didn't get cut off or cropped when placing inside of a card.
Thanks for the help all.
Good morning!
I'm currently trying to create a view similar to this mockup.
I have put down 3 different screen sizes so you can see the issue.
I have a header background image (grey box) with an angled bottom. On the right I want to display an image, which obviously needs to be positioned.
Positioning it horizontally is no issue but how can I position the image vertically? I have it positioned fixed for one screen size but obviously need to make it flexible.
Any ideas? Help would be much appreciated!
David
You can definitely use measure as #rajesh pointed out, or you can use Dimensions. As far as getting the layout consistent across devices, using position absolute and measuring the device height should allow you to get consistency across these devices.
Check out this example I set up, it should be a good starting point at least.
https://rnplay.org/apps/pSzCKg
I'm using free images off of iconfinder and they work fine. However I couldn't find a specific image so had to find the image elsewhere.
Anyway the image was an incorrect size so I resized it in photoshop.
I added the image to the images.xcassets folder and used the image for the uibarbuttonitem.
The image has come out as a grey square box.
Highlighting works but all I see is a box.
Am I missing something here?
Would appreciate some help thanks.
Make sure the image is a PNG. What is the size of the image you are using?
Apple's iOS HIG
I had to change a setting in photoshop. When saving the photo I had to make sure interlanced was chosen.
I'm using PS CS6 and have almost no experiences with Photoshop. I just need to get some sizes in pixels to create HTML.
Maybe a trivial question, but couldn't find any answer on Google and stackoverflow.
Problem:
The main image consists of different layers. Those layers contain an image. How do I get the size of those images in pixels? I could use the ruler but there has to be a much more simple way. Any idea?
Please assist me.
Try this
For Single image (sub-Image)
Select or click on Image than look under menu of cs6 you can show [Show Transform Control] check it and you can re-size your image in any size.
For Whole Image
PS>Image > Image Size > Give Wight and Height in Pixel so u can use that image as HTML file.
Hope It will be work
Regards
Dhruvil
for images or other objects on a layer show the info palette (F8) and select the object as if you wanted to resize it (eg click upper right corner). The dimensions of the image are then displayed in the info palette.
In PS CS6 simply make a rectangle and you have shown its size next to the cursor. Before this make sure that you have pixels as your main unit in preferences.
Good Luck.
Ive been asked to create a website mock-up using Photoshop, but I'm not sure what size to use for my canvas.
Please could you help me about that? or give me an advice?
This is a hard question as mostly websites are adaptive. From my experience I would say the height doesn't really matter if you allow scrolling, otherways I would take 700px for height. The width should be no more then 1200px.
I'd simply suggest to stick with some grid framework, eg. 960.gs: http://960.gs/
You'll get a PSD grid to fit your design into and also CSS framework which you can use later for website coding.
For a more up to date grid framework I suggest http://unsemantic.com/ since it allows for a responsive grid.