0

レスポンシブ デザインの Web ページを作成しようとしています。テーブルとテキストでうまく機能します（ブラウザのサイズを変更すると、自動的にサイズが変更されます。しかし、これは私の写真には起こりません。

CSS ファイル:

@media screen and (max-width: 999px) {
 .page {
    width: 720px;
 }
 .header {
    width:720px;
 }
 img{
    width: 720px;
 }
}

@media screen and (max-width: 719px) {
 .page {
    width: 100%;
 }
 .header {
    width:100%;
 }
 img {
    width: 100%;
 }
}

@media screen and (max-width: 479px) {
 .page {
    width: 98%;
 }
 .header{
    width: 98%;
 }
}

.page {
  width: 960px;
  background-color: #fff;
  margin: 20px auto 0 auto; 
  border: 1px solid #496077;
}

img {
  float: left;
  width: 48%;
  margin: 0 1%;
}

私の .aspx ファイル:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
    <table border = "1">
<tr>
<td><center>'''Learning Outcome'''</center></td>
<td><center>'''Achievement Methods'''</center></td>
</tr>

<tr>
<td>Realistic problem solving and learning to learn skills</td>
<td>
my text here
</td> 
</tr>

<tr>
<td>Managing a real-time project from initiation to rollout </td>
<td>
my text here
</td>
</tr>

<tr>
<td>Understanding banking industry processes & practices</td>
<td>
my text here
</td>
</tr>

<tr>
<td>Team Cohesiveness</td>
<td>
*my text here
</td>
</tr>


</table>

<div>
    <img src="http://files.g4tv.com/images/blog/2008/06/18/633493967095957891.jpg" class="img" alt="DOMO">
    <img src="http://files.g4tv.com/images/blog/2008/06/18/633493967095957891.jpg" class="img" alt="image">
</div>

テキストはレスポンシブですが、写真はレスポンシブです。jsfiddle の例を参照してください: jsFiddle

4

2 に答える 2

2

メディアクエリが既に配置されている場合 (および画像サイズを完全に制御したい場合) は、画像に提供したピクセル幅を使用します。サイズ変更時に常に img をスケーリングしたい場合は、次を使用します。

img{
    max-width: 100%;    
    _width: 100%;
}

余談ですが、レスポンシブ デザイン ページを扱っている場合は、デスクトップからモバイルに移行するときに大きな画像を小さな画像に交換する (または非表示にする) ことを検討する必要があります。代わりにモバイル レイアウト画像などを使用するよりも、ページの読み込み時間を短縮できます。

編集：

メディア クエリの外部でimg スタイルを指定しているため、以前のスタイルが設定されている場合でも常に上書きされます。css ファイルの先頭で常にデフォルト スタイルを指定し、その後にメディア クエリ ルールを指定する必要があります (それらは画面であるため)。 -幅固有）、また、メディアクエリの幅は非常にアドホックであるようです。私はスターターに次のベースを使用します：（モバイルファーストアプローチ）。

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
/* your styles */
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
/* your styles */
}

/* SMALL TABLET */
@media only screen and (min-width: 600px) {
/* your styles */
}

/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
/* your styles */
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
/* your styles */
}

/* DESKTOP */
@media only screen and (min-width: 1280px) { 
/* your styles */
}

/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) { 
 /* your styles */
}

現在のファイルに問題がある場合は、html ヘッダーを修正し、次回はより正確な情報を提供することも検討してください :)..レスポンシブ グリッドの設計は簡単ではなく、そうしようとするときに開始するネットワークには複数のリソースがあります。例: http://fluidbaselinegrid.com/およびhttp://twitter.github.com/bootstrap/コードを調べて学習します。私が現在取り組んでいるプロジェクトに基づいて、既製のレスポンシブ デザイン グリッド/フレームワークをベースにしています。頑張ってください、そしてやり過ぎた答えでごめんなさい！

于 2012-08-18T12:40:20.367 に答える
0

最初に画像に固定幅を設定してください。

<img src="image.png" width="100px"/>

max-width を 100% に設定します。

img {max-width: 100%;}​
于 2012-08-18T12:51:07.767 に答える