10

Typo3とTwitterBootstrapでレスポンシブウェブサイトを作成するために、画像の高さと幅の属性を削除したいと思います

テキストと画像および画像タイプのコンテンツ要素を介してフロントエンドで画像が生成される方法は次のとおりです。

<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />

ディメンション属性を削除して、これを取得したいと思います。

<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />

誰かが私を助けることができますか？

4

12 に答える 12

10

document.ready関数で画像タグを呼び出します。

$('img').removeAttr('width').removeAttr('height');
于 2012-06-13T12:56:43.893 に答える
6

参考：タイプミスでこれを削除する方法はありません。widthandheight属性は関数にハードコーディングされていsysext/cms/tslib/class.tslib_content.phpますcImage。（Typo3 4.7）

于 2012-06-13T15:00:33.660 に答える
4

jqueryを使用する

画像オブジェクトにIDを設定します。

<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />

$('#myimage').removeAttr("height").removeAttr("width");

代替のJavaScriptコードは次のとおりです。

var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
于 2012-06-13T11:49:43.240 に答える
4

タイプミスで高さまたは幅の画像属性を削除することはできません。

ただし、レスポンシブWebサイトを作成するために、CSSでオーバーライドすることもできます。

img { height:100% !important; width:100% !important; }

于 2014-02-01T19:18:15.853 に答える
3

これはTYPO36.2LTSで可能になります。チェックアウトhttp://forge.typo3.org/issues/49723。

于 2013-09-12T18:03:15.690 に答える
3

これらの属性を実際に削除せずに、固定の幅や高さの属性の影響を削除するには、CSS定義でそれらを「自動」に戻すことができます。

img {
    height: auto !important;
    width: auto !important;
}

写真を流動的にする必要があるimgタグに対してのみこれを行うことをお勧めします。これは、imgタグまたは周囲のタグにIDまたはクラスを追加することで実行できます。

たとえば、流体画像がクラス「fluid_pics」のラッパーdivにある場合は、次を使用できます。

.fluid_pics img {
    height: auto !important;
    width: auto !important;
}

多くの場合、幅はフレームワーク（Twitter Bootstrapなど）によって100％に上書きされているため、高さをautoに戻すだけで済みます。

于 2014-10-02T17:45:07.310 に答える
2

TypoScriptは、ソースコードから「width」属性と「height」属性を削除します。TYPO3CMS6.1以降。

tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_newsの例：ニュースリスト

plugin.tt_news.displayList.image.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
于 2015-04-06T03:47:52.843 に答える
1

画像にidまたは別の一意の属性が割り当てられている場合は、次のように簡単に行うことができます。

var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
于 2012-06-13T12:22:06.150 に答える
1

Typo3 6.2以降では、カスタム画像レンダリングレイアウトを設定できます（スニペットはTSセットアップに属します）：

tt_content.image.20.1 {
    layout {
        mylayout {
            # equals default rendering, except width and height removed
            element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
        }
    }
}

css_styled_contentのカスタムレイアウトを有効にします（スニペットはTS定数に属します）：

styles.content.imgtext.layoutKey = mylayout

IMAGE cObjectの詳細については、https： //docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkeyを参照してください。

于 2015-09-14T07:36:28.803 に答える
1

TYPOSCRIPTを使用した古いTYPO3の解決策があります。

stdWrap {
    replacement {
        10 {
            search = /\s+(width|height)="[^"]+"/
            useRegExp = 1
            replace =
        }
    }
}

このstdWrap-TSを使用して、画像がレンダリングされます。

于 2016-10-04T12:51:22.813 に答える
0

6.1では動作しません：/しかしuはCSSを使用できます：

img {
    display: block;
    max-width: 100%;
    height: auto;
}
于 2015-04-07T13:51:36.977 に答える
0

これは、jQueryを使用した非常にシンプルなソリューションです。私はwpwizard.netで答えを見つけました。

URLは次のとおりです： http ：//wpwizard.net/jquery/remove-img-height-and-width-with-jquery/

jQueryは次のとおりです。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

    $('img').each(function(){ 
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });

});
</script>
于 2016-03-11T14:32:26.580 に答える