1. 程式人生 > >div裡面的圖片超出div的寬度,自動調整大小。

div裡面的圖片超出div的寬度,自動調整大小。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic{ margin:0 auto; width:740px; padding:0;} 
#pic img{ max-width:740px; width:expression_r(document.body.clientWidth>document.getElementByIdx_x_x("pic").scrollWidth*9/10? "740px": "auto" );}
</style>
</head>
<body>
    <div id="pic" style="width:740px;">
        <img id="img" src="http://f.hiphotos.baidu.com/image/pic/item/bd3eb13533fa828bd30590f5fe1f4134970a5a85.jpg" alt="" runat=server/>
    </div>
</body>
</html>

測試谷歌 ie8、10都能用。

相關推薦

div裡面圖片超出div寬度自動調整大小

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #pic{ margin:0 auto; width:740

UILabel自適應裡面的文字自動調整寬度和高度

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,0,0)]; // frame之後會重置size。     [label setNumberOfLines:0]; // 允許多行顯示

讓一個div裡面的其它div或者標籤內容居中

方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

拖動圖片到 Python 指令碼自動生成 Markdown 格式連結

由於用 Markdown 寫作時,插入圖片十分繁瑣,於是誕生了本指令碼。 效果預覽 準備工作 Python 2.7 騰訊雲 cos SDK Tinify pip install qcloud_cos_v4 tinify 使用騰訊

Android 將本地資源圖片轉換成Drawable進行設定大小

前言: 因為專案中顯示圖片是用Picasso,設定placeholder和error圖片的時候發現,本地圖片的大小無法滿足我的需求,需要先對圖片大小改變再顯示。 Picasso的placeholder和error的引數也只有int resId和Drawable drawable 於是打算將改

concurrenthashmap 採用自動調整大小的陣列鎖是不是效率更高一點呢?

1. 在基於雜湊的集合演算法中,如果每個表項都與單個元素相關聯,則成為開放地址法。 如果每個表項指向一個元素集(成為桶),則稱為封閉地址法。 2. 任何一個雜湊集演算法都要解決衝突問題:當兩個不同的元素雜湊到同一個表項時該如何處理。 開發地址演算法通常使用另外一個雜湊函式來

一份通用makefile,自動遍歷子目錄原始檔自動生成依賴

這份makefile可以將當前makefile所在資料夾以及所有子資料夾中的cpp檔案打包成靜態庫/動態庫/可執行檔案. 自動生成所有依賴關係,修改任何檔案都可以觸發重新編譯相應依賴的檔案。 在U

基本型別包裝類以及String之間的轉換自動拆裝箱

一:  基本型別包裝類:           為什麼會有基本型別包裝類?                         為了對基本資料型別進行更多的操作,更方便的操作,java就針對每一種基本資料型別提供了對應的類型別.           常用操作:    常用的操作

UGUI 應對各種螢幕自動調整大小

gpo float width eight 自動調整 getc match enc () void Awake(){CanvasScaler canvasScaler = GetComponent<CanvasScaler>();float screenWidt

如何實現控制元件隨對話方塊大小變化而自動調整大小和位置

1. 處理對話方塊的WM_SIZE,然後用MoveWindow或者SetWindowPos來把對話方塊上面的控制元件重新調整新位置和大小。  2. 基本的做法就是響應WM_SIZE訊息,並按照視窗大小比例來調整控制元件的位置和大小,控制元件的大小最好設定成視窗的百分之幾,這

去掉textarea小三角禁止調整大小

如果你使用谷歌瀏覽器或火狐瀏覽器,你會發現頁面上的textarea元素的右下角有個小三角,用滑鼠箭頭拖拽它,你的textarea就能隨著放大或縮小。這是現代瀏覽器為方便使用者而新增的一個輔助功能(很遺憾,不包括IE,如果你使用IE,是看不到的。)。Web程式設計師在設計網

PB讓視窗在不同的解析度下自動調整大小函式

//給你個通用函式,在視窗的OPEN事件中加句 f_resize_object(this)即可。 //f_resize_object(window   va_window) //以下為內容: //定義環境變數   environment   ve_hjbl dec

把介面上靜態文字控制元件的尺寸根據文字的內容自動調整大小

函式功能:該函式計算指定的正文字串的高度和寬度。    函式原型:BOOL GetTextExtentPoint32(HDC hdc, LPCTSTR lpString, int cbString, LPSIZE lpSize);    引數:hdc:裝置環境控制代碼。    lpString:指向正文

把介面上靜態文字控制元件的尺寸根據文字的內容自動調整大小(轉)

   函式功能:該函式計算指定的正文字串的高度和寬度。 函式原型:BOOL GetTextExtentPoint32(HDC hdc, LPCTSTR lpString, int cbString, LPSIZE lpSize); 參      數:hdc:裝置環境控制代碼。               

超出div寬度範圍的文字進行省略號省略在鼠標移上去以後顯示完整的內容

ellipsis 高度 font 麻煩 http 進行 代碼 改變 禁止 一、前言   當我們在固定的範圍內顯示內容時,我們是希望能夠完整顯示的,然而往往事與願違,文本會超出我們給定的範圍,這時候怎麽辦呢? 二、超出範圍,對文本進行省略號隱藏   先上圖   代碼很簡單

div裡面放一張圖片要求不重複、鋪滿

直接上程式碼 <div id="dataImage" style="no-repeat;z-index:-1;"> //這裡width和height根據需求隨便設定 <img src="/super/images/pgjg.jpg" style="wid

div 自動適應子div 寬度撐開瀏覽器的寬度

看到標題的時候,一下子不知道說的是什麼意思? 我解釋一下: 就是在預設的情況下,當我們設定<div style="width:100%;"></div>的時候div的寬度為瀏覽器的寬度。 現在有這樣一個佈局: <div id='father'

div裡面的內容超出自身高度時顯示省略號

1.給DIV設定屬性:width: 200px; text-overflow: ellipsis; overflow: hidden; 當div裡面的內容總寬度找過 200PX的時候,超出的部分會以“.

前端頁面給指定的div添加遮罩層並且帶有加載中的小旋轉圖片

left 說了 -s 加載 jquer 其中 ges loading style 話不多說,先上代碼,其實還是比較簡單的 1 $("<div id=‘shade‘ style=‘opacity:0.85;background:white‘></div

(轉載)div內文字超過寬度自動換行

strong 部分 div 英文單詞 tar oba blank word-wrap ati 解決方法:div 設置寬度後 style加上 word-break:break-all; 或者 word-wrap:break-word; 區別:(http://zhidao.