I am working on a database project and have hit a cosmetic snag.
I have a database that loads profiles into arrays for displaying using a php while loop, so it is set to display the content of a database and allow for adding with no additional coding.
Four of the fields are picture upload locations, as part of the upload process is the ability to upload up to 4 different images, which are then saved in a directory and their path saved to the profile database.
Here is my problem however, not all the images are the same size (as in width and height). I have my code set up designating a specific area to an image to stop it filling up the screen, but rather then scale it, the code simply squishes or stretches the dimensions. So a 80*120 image being resized is just being distorted.
This is the section of code responsible for calling the image into the field.
<div id="wb_Text2" style="position:absolute;left:10px;top:<?php echo $imagepix ? >;width:100px;height:120px;z-index:5;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:15px;"><img src="uploads/<?php echo $productpicture ?>" alt="" style="width:70px;height:120px;" ></span></div>
The first section is a cosmetic alignment of the container, the second imports the image and formats it accordingly.
I am using the style= section for sizing but its obviously the wrong approach and I cant find any useful info on what exactly I'm looking for as half the battle is knowing what to ask!
The end result is to be able to scale an image so various requirements by simply changing a ratio on the output field such as altering style to style="width:140px;height:240px
I hope this makes sense and someone has some insight.
Thanks
You could use max-height and max-width instead of height and width, and apply a black background to the image container. You would also have to center the image in the container both horizontally and vertically. Do this by setting the line-height of the container equal to the height and using text-align.
<div id="image-container" style="width: 70px; height: 120px; text-align: center; line-height: 120px; background: black;">
<img src="image.jpeg" style="max-height:120px; max-width: 70px; display: inline-block;" />
</div>
Of course you should put the style tags into a stylesheet instead.
If you would rather crop the image instead of having it fit in with a black background, let me know because this can also be done with CSS and maybe a bit of JavaScript.
Related
I've recently started a new job at an Audio Visual company and they've asked me to develop an application that allows users (without authentication) to upload images to a display page and have it automatically scroll through.
I chose the only carousel I've ever found helpful but my issue is that the landscape images are not vertically aligned with the portrait images.
My code is set up so that the uploaded image is sent through to a database and then retrieved to display automatically in the carousel so each image has it's own individual div tag.
The page itself won't load without database connection and doesn't work in JSFiddle because of the PHP elements within.
Also here are screenshots of my issue:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
I want image 2 to display in the center of the page and everywhere I look for the correct information I don't seem to find what I'm looking for.
Please help me, I would very much appreciate it!
AlexJamesDean.
You can add position to image div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
I'm having trouble adjusting the size of the play button on an embedded Kultura video. When I embed a video within a smaller container or screen size, the play button is so large that it nearly covers the entire thumbnail on any state. (see attachment) Does anyone know how I can adjust the button's size?
Read about Player Skin Overrides and about Player States.
Essentially, you would need to add custom CSS override, and include something like the below example;
.size-tiny .largePlayBtn {
width: 8px !important;
height: 10px !important;
}
I have created one popup box which opens on page load, that pop box contains an image. The pop up box is adjusts size according to the resolution of the image, but the image inside the popup box is not resizing. I am using Joomla plugin for that (Simple Pop-Up).
I am trying to change the image accordion to the resolution but it is not reflecting.
This is the code for the pop-up box:
<div style="background:url('guntavnuk.pixabytes.co.in/guntavnuk/…;
<div style=" padding-left: 647px; padding-top: 13px;background:none repeat scroll 0 0 transparent;" >
<iframe src="guntavnuk.pixabytes.co.in/guntavnuk/email.php"; width="300px;" height="190px;" style="overflow:hidden;margin-top:41px;" > </iframe>
</div>
</div>
I can't see the issue on the website. It seems the image is displaying at it's full resolution and so you won't get bigger than that unless you design the image with bigger dimensions. You could then set the width to 100% and height to auto for the image. However you won't be able to accommodate for all screen resolutions due to them varying so much.
Im working on this website www.theartisanscorner.com.au/index.php and i am very new to Opencart. I have been really trying to work this out, and really need some help
The text is too close on all pages in regards to the edge of the pages. I have changed the width of div container, but it just stretches it out.
I want to use an image as a border for all pages on the div container on all pages. I can add border-style: solid; but i would like an image instead.
container {
background: none repeat scroll 0 0 #FCE3CE;
margin-left: auto;
margin-right: auto;
width: 980px;
}
On the homepage slideshow i want to have a border around it (if possible an image border)
There is white on the footer images, is this due to the size of the images i have uploaded?
Many thanks,
Deryn
The text is too close on all pages in regards to the edge of the pages. I have changed the width of div container, but it just stretches it out.
You can change width: 980px; in /catalog/view/theme/your-theme-name/stylesheet/stylesheet.css but as usual it is 980 px because some users have 1024px width in their browsers.
I want to use an image as a border for all pages on the div container on all pages. I can add border-style: solid; but i would like an image instead.
Use css rule background-image.
On the homepage slideshow i want to have a border around it (if possible an image border)
Yes, it is possible with background-image
There is white on the footer images, is this due to the size of the images i have uploaded?
Maybe it is because you have something after footer? As default there is a message "Powered by Opencart" and due to this message, there is a white space after footer.
I have managed to pull out these images using PHP and JSON with Facebook's graph API. This is the URL I used.
I only want 3 pictures from the album but I want all the pictures to be displayed in a standard size of 200x175px without distorting the pictures. How can I achieve this? (like displaying pictures in thumbnails in a Facebook album). This is my testing page:
What if you display the image inside a div with fixed height and width with overflow: hidden. The image won't be resized but at least all will be showed in the same size
I am just thinking about this on the fly here, but try styling the "fbimg" class.
Like so:
.fbimg {
height: 200px;
}
If the images are going to be different (different heights and widths)...then I don't believe that you can keep them the same height and width without distortion. But if someone learns a trick how to do that...I want to learn it too. ;)
My solution was to add a:
style="max-width: 100px; max-height: 100px;"
to the "img" output of my parser. You can see all the thing in my github: https://github.com/kyuumeitai/Social-buzz/commit/0baf3c5a86e52e64e04796bdcf22a951eeaff291