I have created a website which talks about football. In my database I have a table named description, which stores texts and images. I upload texts and images using CKEditor and give the 'img-responsive' style to images. When I retrieve them from the database, texts are responsive as I resize the screen, but images are not responsive. The width of the image resizes with the screen but the height is not resized at all.
How can I make images responsive for both width and height?
This is how I retrieve texts and image from database:
echo "$row['description']";
Thanks very much for any help.
Providing some code to your question would help a lot. This is a CSS side problem, Taking a blind guess I think giving a height:auto; to the image will do.
Related
I'm using Ckeditor and Responsive filemanager. I want that uploaded images were responsive. But when I upload an image, and see it on the article page, it isn't responsive. Even the image goes beyond div. How can I make it responsive?
I find the solution. When adding image to ckeditor just need in ckeditor property window. Instead of pixels use percent.
Screenshot
I have an ecommerce site in which i have to display some products i.e 40-50 products per page.Every product has an image which displays the image of the product.
The main thing is that in the database i have a meduim/high quality image of the product whose dimensions would be around 720px-1024 px , these can vary and every image has dimensions in between these two.
Now, i have two different ways of displaying these images for product, i could use a php script to generate thumbnails from these pics whose dimensions would be 290X290 or i could use the style tag and set the width and height as 290X290 and source as the real image.
Let me explain this by an example.
Original Image
I could do this to display the image
<img src="/imagethumbnail.php?product_id=34"/>
<img style="height:290px;width:290px" src="productimg.png"/>
finall image
one calls a php script and generate a thumbnail image of size 290X290 while the other one simply uses the style tag.
Both of them are working fine but i think when i use the style tags i see a trade off in image quality.While when i use the script to generate the image i see a trade off in image generation like they take sometime to show up on the page.
What would be the better method to do this and what would be the perfect solution towards it?
I think the standard method is to generate the thumbnails in advance. And you should probably set the width and height in the markup as attributes on the img element, rather than under the style attribute.
Just a quick question, I have a fixed space in my site (100px x 210px) to include an image that user will upload (be aware that user can upload any image with any size)
I can show smaller images, but I can not display images that are greater than 100px x 210px (table issues)
Can you recommend me the best option? use a thumbnail creator script in PHP or use styles? like:
<img src="image.jpg" style="max-width: 100px; max-height: 210px;"/>
I really appreciate your recommendations and thanks in advance
At the time of image upload, create a thumbnail image of size
100X210 (if and only if image size is greater than >100X210.) & show them where you want to show. I think this is the best solution
At the time of showing the image, create the thumbnail of required size.( Not suggested.but if you have already a lot of uploaded image, then you can do it.But I will suggest to create a function & create the thumbnail back-end)
I'm resizing larger images contained in posts for my site teasers using ImageCache (Drupal 7), and for some reason the quality of the images goes down significantly when I size down (e.g. 670x400 pixel image is sized down to 220x185). Quality doesn't usually go down when sizing an image down (only when sizing up?)
Does anyone know how I can fix this?
Thanks.
In back-end, under Configuration/Media/Image toolkit you can set the JPEG quality.
URL is:
/admin/config/media/image-toolkit
You can set a specific image style (image cache) preset for the node teaser from content type Manage display page. e.g. ?q=admin/structure/types/manage/[CONTENT_TYPE]/display/teaser
Click the gear icon next to the image field, and choose the image style you want to apply to the content type's teaser display.
When I upload vertical photo, after uploading it display sideway.
I am using uploadify, and doing simple croping of the image using jQuery Jcrop.
Can anybody give me solution?
check your css class for displaying image and height and width of the image that you are displaying.