I am using CarrierWave to upload an image. The image uploads fine. But any vertical image (only vertical images) displays sideways. How can I fix this?
<div class="row">
<div class="profile_picture">
<%= image_tag #user.attachment.url %>
</div>
</div>
the image tag turns into:
<img src="/uploads/user/attachment/23/CIMG6610.JPG" alt="Cimg6610">
CSS:
.profile_picture {
max-width: 100%;
img {
max-width: 100%;
}
}
if I look at the upload directly in the browser "localhost:3000/uploads/user/attachment/23/CIMG6610.JPG" it displays correctly
It seemed to be an issue with the upload. Adding this to my Uploader fixed the issue.
process :auto_orient
def auto_orient
manipulate! do |img|
img = img.auto_orient
end
end
Thanks #JohnDevelops
Related
I need to display a psd file that contain several image into my website.
My web site is responsive.
In this case when i display images inside web page : I should set position of images to absolute
When I get preview in mobile device position of images Shakes.
How can i export this psd file to html or svg file that position of images is fixed.
<div class="col-md-10">
<img src="~/Images/package.png" class="img-responsive"/>
<img src="~/Images/makesh.png" />
</div>
Why don't you use max-width of your image container
.image_container{ text-align: center;}
.image_container img{ max-width: 100%;}
<div class="image_container">
<img src="https://i.stack.imgur.com/VuXLO.png" alt="gas-pipe">
<img src="https://i.stack.imgur.com/Lr6u0.png" alt="gas-pipe">
</div>
I recently updated my Ionic 2 project to Ionic 3, and the changes to ion-slides have broken my app.
Specific widths are being set in the style tags on the slides when the app loads, and it's breaking my styles.
This is what I have in my HTML:
<ion-slides pager>
<ion-slide *ngFor="let image of offer.Gallery">
<img [src]="image.Url"/>
</ion-slide>
</ion-slides>
And this is how it renders:
<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager="">
<div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper">
<ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;">
<div class="slide-zoom">
<img src="IMG">
</div>
</ion-slide>
</div>
... Pagination ...
</ion-slides>
You'll notice that somehow the ion-slide tag has a style="width: 171px;" set on it. What is causing this and is there a way to turn it off?
you can address the ion tags directly in Ionic 3!
A more dynamic solution would be using unset value for it.
Just try to write in your yourpage.scss:
ion-slide {
width: unset !important;
}
and it should remove it!
If it is not the width you need then just change it as shown below.
Note: There are No Saas variables for this
your-page.scss
.md,
.ios,
.wp {
.swiper-slide .swiper-slide-active{
width: 100px;//your width here
}
}
Note: If above was not working then you must use width: 100px !important;. No other option where I can think of.
Try this:
ion-slide >:first-child {
width: 100%;
}
The slidesPerView option defaults to 1; to show more slides at a time, increase this in your slider options.
HTML:
<ion-slides pager [options]="slideOpts">...
typescript:
slideOpts:any = {slidesPerView: 7}
I'm working on a lightbox where I'd like to do as much as possible in CSS.
I'm using viewport units to make the whole thing responsive.
Unfortunately IE (I've tested it in version 11) doesn't resize dynamically loaded images properly.
Compare the following jsfiddle's and resize your browser to see what I mean.
Static image
<div class="lightbox lightbox--active">
<div class="lightbox__inner">
<div class="lightbox__content" data-lightbox-content="">
<img src="path/to/image">
</div>
</div>
</div>
Dynamically loaded image
<div class="lightbox lightbox--active">
<div class="lightbox__inner">
<div class="lightbox__content" data-lightbox-content="">
<!-- Image loaded with JS -->
</div>
</div>
</div>
Any thoughts on how to work around this?
IE10+ has been weird with the width and height attributes (which seem to be added automatically in this case), so we'll override them:
.lightbox .lightbox__content img {
...
width: auto;
height: auto;
}
Demo
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}