?
Solved

Problem to picture file

Posted on 2016-11-07
3
Medium Priority
?
143 Views
Last Modified: 2016-11-09
Hi,
Having these
    <div class="left up">
           <asp:Image ID="aspImagePreview" runat="server" AlternateText="Preview" ImageUrl="~/output.jpg" />
    </div>

Open in new window

on two deployed pages, one Web page is having no problem to the displayed picture file, but on another Web page, the picture file is too big. Why?
0
Comment
Question by:HuaMinChen
  • 2
3 Comments
 
LVL 10

Expert Comment

by:Paweł
ID: 41878308
you probably are missing the css file on the second page that controls the size of the image.
0
 
LVL 11

Author Comment

by:HuaMinChen
ID: 41879826
I press F12 and have seen no problem. I already copy these

        .left img {
          border:Groove 1px #ccc;
          border-radius: 14px;
        }
        .left {
            position:absolute;
            left:10px;
            border-radius: 4px;
            width:330px;
            right:10px;
        }
        .up {
            top: 20px;
            border-radius: 4px;
        }

Open in new window

and have re-deployed the project but there is no improvement. What other css parts should be copied?
0
 
LVL 10

Accepted Solution

by:
Paweł earned 1500 total points
ID: 41880063
it doesn't look as if you're setting the size on the image element

something like
//set image explicitly to particular size
.left img{
    width:330px;
            height:330px;
}

or try

//make image fit to container
.left img{
max-width:100%;
max-height:100%;
}
0

Featured Post

Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question